/* 09-tutor.css — 일반 튜터 전용 스타일
 * 토큰만 사용 (단일 indigo + 글래스). 보조색·구리 그라디언트 금지.
 * tutor.html 에서만 link 된다.
 */

/* ───── 페이지 헤더 ───── */
.tutor-main { padding-top: var(--space-8); padding-bottom: var(--space-12); }

.tutor-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: var(--space-6);
  align-items: end;
  margin-bottom: var(--space-8);
}
/* 메타 셀렉터를 보강 섹션으로 이동한 후의 단일 열 레이아웃 */
.tutor-head--lean {
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: var(--space-6);
}
.tutor-head__eye {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fz-12);
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
}
.tutor-head__eye-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(31,58,138,0.14);
}
.tutor-head__title { margin: 12px 0 8px; color: var(--ink-strong); }
.tutor-head__lede { color: var(--ink-soft); max-width: 62ch; line-height: var(--lh-base); }

.tutor-head__meta {
  padding: var(--space-4) var(--space-5);
  display: grid;
  gap: var(--space-3);
}
.tutor-meta__row {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: var(--space-3);
}
.tutor-meta__row .t-caption {
  color: var(--ink-mute);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: var(--fz-12);
}
.tutor-meta__select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%) calc(100% - 16px) 50% / 6px 6px no-repeat,
    var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fz-14);
  transition: border-color var(--dur-2) var(--easing-standard);
}
.tutor-meta__select:focus { outline: none; border-color: var(--accent); }

/* ───── 메인 그리드 ───── */
.tutor-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

/* 좌·우 사이를 덮는 SVG 오버레이 */
.tutor-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}
.tutor-arrow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.6;
  transition: opacity var(--dur-2) var(--easing-standard),
              stroke-width var(--dur-2) var(--easing-standard);
}
.tutor-arrow.is-active {
  filter: drop-shadow(0 0 6px rgba(31,58,138,0.35));
}
.tutor-arrow.is-stale {
  stroke: var(--ink-faint);
}

/* ───── 좌: 에디터 ───── */
.tutor-pane--editor {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.tutor-editor__head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.tutor-editor__title {
  flex: 1;
  border: 0;
  border-bottom: 1.5px solid var(--line);
  background: transparent;
  font: 600 var(--fz-24)/var(--lh-tight) var(--font-serif);
  color: var(--ink-strong);
  padding: 6px 4px;
  outline: none;
  transition: border-color var(--dur-2) var(--easing-standard);
}
.tutor-editor__title:focus { border-bottom-color: var(--accent); }
.tutor-editor__title::placeholder { color: var(--ink-faint); }

.tutor-editor__reset {
  border: 1.5px solid var(--line);
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: var(--fz-13);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--dur-2) var(--easing-standard);
}
.tutor-editor__reset:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.tutor-editor__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.tutor-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tutor-section__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.tutor-section__label {
  font-size: var(--fz-12);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.tutor-section__hint {
  font-size: var(--fz-12);
  color: var(--ink-mute);
}
.tutor-section__hint strong { color: var(--ink-soft); font-weight: 600; }
.tutor-section__count {
  margin-left: auto;
  font-size: var(--fz-12);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

.tutor-section__editable {
  position: relative;
  min-height: 96px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fz-16);
  line-height: var(--lh-loose);
  outline: none;
  transition: border-color var(--dur-2) var(--easing-standard),
              box-shadow var(--dur-2) var(--easing-standard);
}
.tutor-section__editable:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31,58,138,0.12);
}
.tutor-section__editable[data-empty="true"]::before {
  content: attr(data-placeholder);
  color: var(--ink-faint);
  pointer-events: none;
  font-style: italic;
}
.tutor-section[data-section="body"] .tutor-section__editable {
  min-height: 200px;
}

.tutor-editor__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
  font-size: var(--fz-12);
  color: var(--ink-mute);
}
.tutor-editor__total strong {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ───── 우: 코치 패널 ───── */
.tutor-pane--coach {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-self: start;
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 100px);
}
.tutor-coach__head {
  display: grid;
  grid-template-columns: 12px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  padding: 4px 4px 12px;
  border-bottom: 1px dashed var(--line);
}
.tutor-coach__dot {
  grid-row: 1 / span 2;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(31,58,138,0.14);
}
.tutor-coach__title { margin: 0; color: var(--ink-strong); }
.tutor-coach__sub { margin: 2px 0 0; color: var(--ink-mute); }

.tutor-coach__empty {
  padding: var(--space-5);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  color: var(--ink-soft);
  background: var(--surface-glass);
}
.tutor-coach__empty strong { color: var(--accent); }
.tutor-coach__empty em { font-style: normal; color: var(--ink); border-bottom: 1px solid var(--line); }

.tutor-coach__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
  padding-right: 4px;
}

.tutor-coach-card {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  scroll-margin-top: 80px;
  transition:
    transform var(--dur-2) var(--easing-standard),
    box-shadow var(--dur-2) var(--easing-standard),
    border-color var(--dur-2) var(--easing-standard);
}
.tutor-coach-card.is-active {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}
.tutor-coach-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tutor-coach-card__tag {
  font-size: var(--fz-12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.tutor-coach-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-coach-card__close:hover {
  color: var(--err);
  background: rgba(182,48,63,0.1);
}
.tutor-coach-card__source {
  font-size: var(--fz-13);
  color: var(--ink-mute);
  font-style: italic;
  margin: 0 0 6px;
  line-height: var(--lh-snug);
}
.tutor-coach-card__body {
  font-size: var(--fz-14);
  color: var(--ink);
  line-height: var(--lh-base);
  margin: 0;
}

/* ───── 드래그-팝업 (body 직속) ───── */
.tutor-popup {
  position: absolute;
  z-index: var(--z-popover);
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 4px;
  background: var(--surface-glass-2);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-glass-strong);
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
  transition: opacity var(--dur-2) var(--easing-emphasis),
              transform var(--dur-2) var(--easing-emphasis);
}
.tutor-popup.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.tutor-popup__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--fz-13);
  font-weight: 500;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-1) var(--easing-standard),
              color var(--dur-1) var(--easing-standard);
}
.tutor-popup__btn:hover {
  background: rgba(31,58,138,0.10);
  color: var(--accent);
}
.tutor-popup__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

/* ───── 하단 통계 5카드 (G1: 누적막대 / G2~G5: ECharts) ───── */
.tutor-stats {
  display: grid;
  /* 데스크탑: G1 1줄 + G2~G5 4분할. 좁아지면 자동 줄바꿈 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
.tutor-stat {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  transition: transform var(--dur-3) var(--easing-standard),
              box-shadow var(--dur-3) var(--easing-standard);
}
.tutor-stat[data-stat="g1"] {
  grid-column: 1 / -1; /* 풀폭 — 가독성 우선 */
}
.tutor-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.tutor-stat__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tutor-stat__head h3 {
  margin: 0;
  color: var(--ink-strong);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--fz-12);
}
.tutor-stat__warn {
  margin-left: auto;
  font-size: var(--fz-12);
  color: var(--warn);
  background: rgba(201,130,31,0.12);
  border: 1px solid rgba(201,130,31,0.3);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.tutor-stat__badge {
  margin-left: auto;
  font-size: var(--fz-12);
  color: var(--ink-mute);
  background: rgba(31,58,138,0.06);
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}
.tutor-stat.is-loading .tutor-stat__badge { color: var(--accent); border-color: var(--accent); background: rgba(31,58,138,0.10); }
.tutor-stat.is-error   .tutor-stat__badge { color: var(--err);    border-color: rgba(182,48,63,0.4); background: rgba(182,48,63,0.10); }
.tutor-stat.is-empty   .tutor-stat__badge { color: var(--ink-faint); }
.tutor-stat__sub {
  margin: 0;
  font-size: var(--fz-12);
  color: var(--ink-mute);
  line-height: var(--lh-snug);
}

/* ECharts 컨테이너 */
.tutor-echart {
  width: 100%;
  height: 220px;
  position: relative;
}
.tutor-stat--echart[data-stat="g2"] .tutor-echart { height: 260px; }
.tutor-stat--echart[data-stat="g5"] .tutor-echart { height: 220px; }

/* skeleton — is-loading일 때 */
.tutor-stat.is-loading .tutor-echart {
  background:
    linear-gradient(90deg, transparent, rgba(31,58,138,0.08), transparent),
    rgba(31,58,138,0.04);
  background-size: 200% 100%, 100% 100%;
  border-radius: var(--radius-md);
  animation: tutor-skel 1.4s linear infinite;
}
.tutor-stat.is-loading .tutor-echart::after {
  content: "분석 중…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: var(--fz-12);
  letter-spacing: 0.06em;
}
@keyframes tutor-skel {
  0%   { background-position: 200% 0, 0 0; }
  100% { background-position: -200% 0, 0 0; }
}
.tutor-stat.is-empty .tutor-echart {
  background: rgba(31,58,138,0.03);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
}
.tutor-stat.is-empty .tutor-echart::after {
  content: "글을 작성하고 [진단] 버튼을 누르세요";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  font-size: var(--fz-12);
  text-align: center;
  padding: 0 12px;
}

/* error 카드 */
.tutor-stat__err {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(182,48,63,0.3);
  background: rgba(182,48,63,0.08);
  border-radius: var(--radius-md);
  color: var(--err);
  font-size: var(--fz-13);
}
.tutor-stat__err-msg { flex: 1; }
.tutor-stat__retry {
  border: 1px solid var(--err);
  background: transparent;
  color: var(--err);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fz-12);
  cursor: pointer;
  transition: background var(--dur-1) var(--easing-standard);
}
.tutor-stat__retry:hover { background: rgba(182,48,63,0.12); }

/* G2 capacity 캡션 */
.tutor-stat__cap {
  margin: 0;
  font-size: var(--fz-12);
  color: var(--ink-faint);
  text-align: right;
}

/* G3 notes */
.tutor-stat__notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: var(--fz-12);
  color: var(--ink-soft);
}
.tutor-stat__notes li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px;
  align-items: baseline;
  line-height: var(--lh-snug);
}
.tutor-stat__note-key {
  color: var(--accent);
  font-weight: 700;
  font-size: var(--fz-12);
  letter-spacing: 0.04em;
}

/* G5 summary */
.tutor-stat__summary {
  margin: 0;
  font-size: var(--fz-13);
  color: var(--ink-soft);
  line-height: var(--lh-base);
  padding: 8px 10px;
  background: rgba(31,58,138,0.04);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--accent);
}

/* G4 데이터 부족 메시지 */
.tutor-stat__msg {
  margin: 0;
  padding: 12px;
  text-align: center;
  color: var(--ink-faint);
  font-size: var(--fz-13);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
}

/* G1 — 누적막대 */
.tutor-bar-stack {
  display: flex;
  width: 100%;
  height: 24px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: rgba(31,58,138,0.08);
  border: 1px solid var(--line);
}
.tutor-bar__seg {
  display: block;
  width: var(--w);
  transition: width var(--dur-4) var(--easing-emphasis);
}
.tutor-bar__seg[data-seg="intro"] {
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}
.tutor-bar__seg[data-seg="body"] {
  background: var(--accent);
  opacity: 0.65;
}
.tutor-bar__seg[data-seg="conclusion"] {
  background: var(--accent-soft);
  opacity: 0.85;
}
.tutor-stat__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--fz-12);
  color: var(--ink-soft);
}
.tutor-stat__legend strong { color: var(--ink); margin-left: 4px; font-variant-numeric: tabular-nums; }
.tutor-stat__legend .dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: -1px;
}
.dot--intro      { background: linear-gradient(90deg, var(--accent), var(--accent-soft)); }
.dot--body       { background: var(--accent); opacity: 0.65; }
.dot--conclusion { background: var(--accent-soft); opacity: 0.85; }

/* G2 — 히스토그램 */
.tutor-stat__hist {
  width: 100%;
  height: 80px;
  display: block;
}
.tutor-stat__metrics {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: var(--space-4);
  font-size: var(--fz-13);
  color: var(--ink-soft);
}
.tutor-stat__metrics strong {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
  font-weight: 700;
}

/* G3 — 라디얼 */
.tutor-stat__radial {
  --p: 0;
  width: 96px; height: 96px;
  border-radius: 50%;
  position: relative;
  margin: 4px auto 0;
  background:
    conic-gradient(var(--accent) calc(var(--p) * 1%), rgba(31,58,138,0.10) 0);
  display: grid;
  place-items: center;
  transition: background var(--dur-4) var(--easing-emphasis);
}
.tutor-stat__radial::before {
  content: "";
  position: absolute; inset: 8px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
}
.tutor-stat__radial-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: var(--ink-strong);
  font-weight: 700;
  font-size: var(--fz-18);
  font-variant-numeric: tabular-nums;
}
.tutor-stat__radial-num .t-caption {
  font-size: var(--fz-12);
  color: var(--ink-mute);
  font-weight: 500;
}

.tutor-stat__chips {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.tutor-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fz-12);
  color: var(--ink-soft);
}
.tutor-chip.is-known {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(31,58,138,0.06);
}
.tutor-chip em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
}
.tutor-chip.is-empty {
  border-style: dashed;
  color: var(--ink-faint);
}

/* ───── 다크 미세 보정 ───── */
:root[data-theme="dark"] .tutor-section__editable {
  background: var(--surface);
}
:root[data-theme="dark"] .tutor-popup {
  background: var(--surface-glass-2);
}
:root[data-theme="dark"] .tutor-stat__radial::before {
  background: var(--surface);
}
:root[data-theme="dark"] .tutor-bar-stack {
  background: rgba(138,180,248,0.08);
}
:root[data-theme="dark"] .tutor-chip.is-known {
  background: rgba(138,180,248,0.10);
}

/* ───── 맞춤법 검사 (spellcheck) ─────────────────────────── */
/* 헤더 [맞춤법 검사] 버튼 — accent 채움 */
.tutor-editor__spellcheck {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: var(--accent-on);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: var(--fz-13);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-2) var(--easing-standard),
              box-shadow var(--dur-2) var(--easing-standard),
              opacity var(--dur-2) var(--easing-standard);
}
.tutor-editor__spellcheck:hover:not(:disabled) {
  box-shadow: 0 8px 22px rgba(31,58,138,0.35);
}
.tutor-editor__spellcheck:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tutor-editor__spellcheck.is-busy {
  opacity: 0.75;
}
.tutor-editor__spellcheck-icon {
  display: inline-flex;
  width: 14px; height: 14px;
  align-items: center; justify-content: center;
  font-weight: 700;
}

/* 결과 패널 — slide-down, glass-card 결 */
.tutor-spellcheck {
  margin-top: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-glass-2);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow-glass);
  animation: tutor-sc-in var(--dur-3) var(--easing-emphasis);
}
/* 우측 컬럼(코치 영역)에서의 변형 — 위로 옮긴 뒤 코치 카드와의 시각 분리 */
.tutor-spellcheck--side {
  margin-top: 0;
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.tutor-spellcheck--side .tutor-spellcheck__title { font-size: var(--fz-13); }
.tutor-spellcheck--side .tutor-spellcheck__list { gap: var(--space-2); }
/* 사이드 컬럼(320px)에서 긴 한국어 구문은 줄바꿈 허용 */
.tutor-spellcheck--side .tutor-sc-card__diff {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 페이지네이션 컨트롤 (코치 패널의 pager와 같은 결) */
.tutor-spellcheck__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--line);
}
.tutor-spellcheck__pager-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-glass);
  color: var(--ink);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fz-12);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--easing-standard),
              background var(--dur-1);
}
.tutor-spellcheck__pager-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(31,58,138,0.08);
}
.tutor-spellcheck__pager-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tutor-spellcheck__pager-idx {
  font-size: var(--fz-12);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
@keyframes tutor-sc-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tutor-spellcheck__head {
  display: grid;
  grid-template-columns: 12px auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--line);
}
.tutor-spellcheck__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(31,58,138,0.14);
}
.tutor-spellcheck__title {
  margin: 0;
  font-size: var(--fz-14);
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: 0.02em;
}
.tutor-spellcheck__meta {
  font-size: var(--fz-12);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.tutor-spellcheck__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tutor-spellcheck__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-spellcheck__close:hover {
  color: var(--accent);
  background: rgba(31,58,138,0.08);
}

.tutor-spellcheck__body {
  padding-top: var(--space-3);
}
.tutor-spellcheck__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.tutor-spellcheck__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-spellcheck__status[data-tone="ok"] {
  border-left-color: var(--ok);
  color: var(--ok);
  background: rgba(30,122,90,0.08);
}
.tutor-spellcheck__status[data-tone="err"] {
  border-left-color: var(--err);
  color: var(--err);
  background: rgba(182,48,63,0.08);
}
.tutor-spellcheck__status[data-tone="loading"] {
  color: var(--accent);
}

/* issue 카드 */
.tutor-sc-card {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(14,28,64,0.04);
  transition: box-shadow var(--dur-2) var(--easing-standard),
              border-color var(--dur-2) var(--easing-standard),
              opacity var(--dur-3) var(--easing-standard);
}
.tutor-sc-card:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--line-strong);
}
.tutor-sc-card__head {
  margin-bottom: 6px;
}
.tutor-sc-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-sc-badge[data-kind="spelling"] { background: var(--brand-indigo-deep); }
.tutor-sc-badge[data-kind="grammar"]  { background: var(--brand-indigo); }
.tutor-sc-badge[data-kind="spacing"]  { background: var(--brand-indigo-soft); }
.tutor-sc-badge[data-kind="style"]    { background: #5478D9; }

.tutor-sc-card__diff {
  margin: 4px 0 6px;
  font-size: var(--fz-15);
  line-height: var(--lh-base);
  font-family: var(--font-serif);
  word-break: break-word;
}
.tutor-sc-card__orig {
  color: var(--ink);
  text-decoration: underline wavy var(--err);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.tutor-sc-card__arr {
  color: var(--ink-faint);
  margin: 0 6px;
  font-weight: 600;
}
.tutor-sc-card__sugg {
  color: var(--accent);
  font-weight: 700;
}
.tutor-sc-card__reason {
  margin: 0 0 10px;
  font-size: var(--fz-12);
  color: var(--ink-mute);
  line-height: var(--lh-snug);
}
.tutor-sc-card__btns {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tutor-sc-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fz-12);
  color: var(--ink-mute);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(31,58,138,0.06);
}
.tutor-sc-card__tag[data-state="applied"] { color: var(--ok); background: rgba(30,122,90,0.10); }
.tutor-sc-card__tag[data-state="skipped"] { color: var(--ink-faint); }
.tutor-sc-card__tag[data-state="failed"]  { color: var(--err); background: rgba(182,48,63,0.10); }

/* 적용된/건너뛴 카드 — 회색 처리 */
.tutor-sc-card.is-applied {
  opacity: 0.55;
  border-style: dashed;
}
.tutor-sc-card.is-applied .tutor-sc-card__sugg {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.tutor-sc-card.is-skipped {
  opacity: 0.5;
}
.tutor-sc-card.is-failed {
  border-color: rgba(182,48,63,0.40);
  background: rgba(182,48,63,0.04);
}

/* ───── 다크 미세 보정 ───── */
:root[data-theme="dark"] .tutor-spellcheck {
  background: var(--surface-glass-2);
}
:root[data-theme="dark"] .tutor-sc-card {
  background: var(--surface);
}

/* ───── 반응형 ───── */
@media (max-width: 1180px) {
  .tutor-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tutor-stat[data-stat="g1"] { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .tutor-head { grid-template-columns: 1fr; }
  .tutor-shell { grid-template-columns: 1fr; }
  .tutor-pane--coach {
    position: static;
    max-height: none;
  }
  .tutor-stats { grid-template-columns: 1fr; }
  .tutor-stat[data-stat="g1"] { grid-column: auto; }
  .tutor-arrows { display: none; }
}

@media (max-width: 640px) {
  .tutor-pane--editor { padding: var(--space-4); }
  .tutor-stat { padding: var(--space-4); }
  .tutor-popup__label { display: none; }
  .tutor-popup__btn { padding: 8px 10px; }
}

/* ════════════════════════════════════════════════════════════════
 * [2026-05-08] 진단/코칭 버튼 + 코칭 패널 + 로딩 락 + 서체 셀렉터
 * ════════════════════════════════════════════════════════════════ */

/* ─── 에디터 헤더 버튼 그룹 (진단/코칭/맞춤법/리셋) ─── */
.tutor-editor__btns {
  display: inline-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-4) var(--space-5);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-glass-2);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow-glass);
  animation: tutor-sc-in var(--dur-3) var(--easing-emphasis);
  margin-bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tutor-coach-suggest__head {
  display: grid;
  grid-template-columns: 12px auto 1fr auto;
  align-items: center;
  gap: 10px;
  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);
}

/* 코칭 제안 카드 */
.tutor-suggest-card {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  scroll-margin-top: 80px;
  transition:
    transform var(--dur-2) var(--easing-standard),
    box-shadow var(--dur-2) var(--easing-standard),
    border-color var(--dur-2) var(--easing-standard);
}
.tutor-suggest-card.is-active {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}
.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: var(--surface-glass-2); }

/* ─── 자석 화살표 — 코칭 카드용 추가 룰 (기존 .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: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
  font-size: var(--fz-12);
}
.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;
}

/* ─── 전역 로딩 락 (body[data-busy="true"]) ─── */
.g-loading-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: var(--z-toast, 9999);
  background: rgba(31,58,138,0.10);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-2) var(--easing-standard);
  box-shadow: 0 1px 6px rgba(31,58,138,0.18);
}
.g-loading-bar.is-on { opacity: 1; }
.g-loading-bar__stripe {
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(31,58,138,0.55) 18%,
    var(--accent) 42%,
    #7A98E0 50%,
    var(--accent) 58%,
    rgba(31,58,138,0.55) 82%,
    transparent 100%);
  border-radius: 2px;
  transform: translateX(-100%);
  animation: g-loading-stripe 1.4s linear infinite;
}
@keyframes g-loading-stripe {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.g-loading-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--z-toast, 9999);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface-glass-2);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-glass-strong);
  color: var(--accent);
  font-size: var(--fz-13);
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--easing-standard),
              transform var(--dur-2) var(--easing-standard);
}
.g-loading-toast.is-on {
  opacity: 1;
  transform: translateY(0);
}
/* 토스트 본체 — 라벨/경과/힌트 세로 정렬 */
.g-loading-toast__body {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  line-height: 1.35;
}
.g-loading-toast__label {
  font-weight: 600;
}
.g-loading-toast__elapsed {
  font-variant-numeric: tabular-nums;
  font-size: var(--fz-12);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.g-loading-toast__hint {
  width: 100%;
  font-size: var(--fz-12);
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0.01em;
}
.g-loading-toast__hint[data-tone="warn"] {
  color: var(--err, #b6303f);
  font-weight: 600;
}
/* 임계 phase 별 강조 — 토스트 보더 색 */
.g-loading-toast[data-phase="mid"]  { border-color: var(--brand-copper, #b07a3f); }
.g-loading-toast[data-phase="slow"] {
  border-color: var(--err, #b6303f);
  box-shadow: 0 8px 24px rgba(182,48,63,0.18), var(--shadow-glass-strong);
}
.g-loading-toast__spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(31,58,138,0.25);
  border-top-color: var(--accent);
  animation: g-loading-spin 0.9s linear infinite;
}
@keyframes g-loading-spin { to { transform: rotate(360deg); } }

/* 락 활성 시 모든 인터랙션 차단 (네비/에디터 포함) */
body[data-busy="true"] button:not([data-loading-exempt]),
body[data-busy="true"] input:not([data-loading-exempt]),
body[data-busy="true"] select:not([data-loading-exempt]),
body[data-busy="true"] textarea:not([data-loading-exempt]),
body[data-busy="true"] a:not([data-loading-exempt]),
body[data-busy="true"] [contenteditable="true"] {
  pointer-events: none !important;
  opacity: 0.55 !important;
  cursor: wait !important;
  user-select: none;
}
/* 락 활성 중에도 진행바/토스트 자체는 정상 표시 */
body[data-busy="true"] .g-loading-bar,
body[data-busy="true"] .g-loading-toast {
  pointer-events: none !important;
  opacity: 1 !important;
}

/* ─── 헤더 서체 셀렉터 (.fpick) ─── */
.fpick {
  position: relative;
  display: inline-flex;
}
.fpick__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-size: var(--fz-13);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--easing-standard),
              color var(--dur-2) var(--easing-standard),
              background var(--dur-2) var(--easing-standard);
}
.fpick__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.fpick.is-open .fpick__btn {
  border-color: var(--accent);
  color: var(--accent);
}
.fpick__icon {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  font-family: serif;
  font-size: 14px;
  color: var(--accent);
}
.fpick__caret {
  width: 10px; height: 10px;
  margin-left: 2px;
  color: var(--ink-mute);
  transition: transform var(--dur-2) var(--easing-standard);
}
.fpick.is-open .fpick__caret { transform: rotate(180deg); }

.fpick__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  /* WHY: 드롭다운은 솔리드 — 반투명일 때 옵션 가독성↓ */
  background: var(--bg-elev);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  /* WHY: 1000 — guided 카드(glass-card backdrop-filter)가 stacking context 만들어
           내부 형제 위로는 어차피 뜨지만, nav/sticky/banner와 같은 외부 요소 위로도
           명확히 떠야 한다. 부모 stacking 한계는 별도 isolation 처리로 해결. */
  z-index: 1000;
}
:root[data-theme="dark"] .fpick__menu {
  background: #000000;
  border-color: var(--line-strong);
}
.fpick.is-open .fpick__menu { display: flex; }
.fpick__opt {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: background var(--dur-1) var(--easing-standard),
              color var(--dur-1) var(--easing-standard);
}
.fpick__opt:hover { background: rgba(31,58,138,0.08); color: var(--accent); }
.fpick__opt.is-selected { background: rgba(31,58,138,0.12); color: var(--accent); }
.fpick__opt-name { font-size: var(--fz-14); font-weight: 600; }
.fpick__opt-desc { font-size: var(--fz-12); color: var(--ink-mute); }

/* 옵션 라벨 자체에 미리보기 폰트 적용 (시각적 식별) */
.fpick__opt[data-font-preview="pretendard"]    .fpick__opt-name { font-family: "Pretendard Variable", "Pretendard", sans-serif; }
.fpick__opt[data-font-preview="notosans"]      .fpick__opt-name { font-family: "Noto Sans KR", sans-serif; }
.fpick__opt[data-font-preview="notoserif"]     .fpick__opt-name { font-family: "Noto Serif KR", serif; }
.fpick__opt[data-font-preview="nanummyeongjo"] .fpick__opt-name { font-family: "Nanum Myeongjo", serif; }
.fpick__opt[data-font-preview="gowundodum"]    .fpick__opt-name { font-family: "Gowun Dodum", sans-serif; }

/* ─── 본문 영역에만 서체 적용 (data-font attribute selector) ─── */
/* 기본(pretendard)은 base 토큰 그대로 둠 */
:root[data-font="notosans"] .tutor-section__editable,
:root[data-font="notosans"] .tutor-suggest-card__advice,
:root[data-font="notosans"] .tutor-suggest-card__quote,
:root[data-font="notosans"] .tutor-coach-card__body,
:root[data-font="notosans"] .tutor-sc-card__diff,
:root[data-font="notosans"] .preview-md,
:root[data-font="notosans"] .editor-prose {
  font-family: "Noto Sans KR", "Pretendard Variable", sans-serif;
}
:root[data-font="notoserif"] .tutor-section__editable,
:root[data-font="notoserif"] .tutor-suggest-card__advice,
:root[data-font="notoserif"] .tutor-suggest-card__quote,
:root[data-font="notoserif"] .tutor-coach-card__body,
:root[data-font="notoserif"] .tutor-sc-card__diff,
:root[data-font="notoserif"] .preview-md,
:root[data-font="notoserif"] .editor-prose {
  font-family: "Noto Serif KR", "Source Serif 4", serif;
}
:root[data-font="nanummyeongjo"] .tutor-section__editable,
:root[data-font="nanummyeongjo"] .tutor-suggest-card__advice,
:root[data-font="nanummyeongjo"] .tutor-suggest-card__quote,
:root[data-font="nanummyeongjo"] .tutor-coach-card__body,
:root[data-font="nanummyeongjo"] .tutor-sc-card__diff,
:root[data-font="nanummyeongjo"] .preview-md,
:root[data-font="nanummyeongjo"] .editor-prose {
  font-family: "Nanum Myeongjo", "Source Serif 4", serif;
}
:root[data-font="gowundodum"] .tutor-section__editable,
:root[data-font="gowundodum"] .tutor-suggest-card__advice,
:root[data-font="gowundodum"] .tutor-suggest-card__quote,
:root[data-font="gowundodum"] .tutor-coach-card__body,
:root[data-font="gowundodum"] .tutor-sc-card__diff,
:root[data-font="gowundodum"] .preview-md,
:root[data-font="gowundodum"] .editor-prose {
  font-family: "Gowun Dodum", "Pretendard Variable", sans-serif;
}
/* nav/UI는 어떤 data-font에서도 항상 Pretendard 유지 (base 01-base.css의 var(--font-sans))
   본문만 위 selector로 override한다. */

@media (max-width: 980px) {
  .tutor-coach-suggest { margin-bottom: var(--space-2); }
  .fpick__menu { right: auto; left: 0; }
}
@media (max-width: 640px) {
  .tutor-editor__btns { width: 100%; }
  .fpick__btn span:not(.fpick__icon) { display: none; }
  .fpick__btn { padding: 6px 8px; }
}

/* ───── AI 보강·편집 (6박스 + 비교 패널) ──────────────────────────── */
.tutor-refine {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.tutor-refine__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px var(--space-3);
}
.tutor-refine__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(31,58,138,0.14);
  grid-row: 1 / span 2;
}
.tutor-refine__title { margin: 0; color: var(--ink-strong); }
.tutor-refine__sub {
  grid-column: 2;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fz-13);
}

/* 6 박스 grid — 데스크탑 2x3, 태블릿 3x2, 모바일 horizontal scroll */
.tutor-refine__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.refine-box {
  appearance: none;
  position: relative;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  padding-right: calc(var(--space-4) + 18px); /* ✓ 우상단 자리 */
  background: var(--surface-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  row-gap: 2px;
  font-family: inherit;
  color: var(--ink);
  transition: border-color var(--dur-2) var(--easing-standard),
              background var(--dur-2),
              box-shadow var(--dur-3),
              transform var(--dur-2);
}
.refine-box:hover {
  border-color: var(--line-strong);
  background: var(--surface-glass-2);
  box-shadow: 0 4px 14px rgba(31,58,138,0.10);
  transform: translateY(-1px);
}
.refine-box:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.refine-box.is-selected {
  border-color: var(--accent);
  background: rgba(31,58,138,0.08);
  box-shadow: var(--shadow-glow);
}
:root[data-theme="dark"] .refine-box.is-selected {
  background: rgba(138,180,248,0.12);
}
.refine-box__icon {
  grid-column: 1;
  grid-row: 1 / span 3;
  font-size: 20px;
  line-height: 1;
  align-self: start;
  filter: grayscale(0.1);
}
.refine-box__label {
  grid-column: 2;
  grid-row: 1;
  font-weight: 600;
  color: var(--ink-strong);
  font-size: var(--fz-15);
}
.refine-box__axis {
  grid-column: 3;
  grid-row: 1;
  font-size: var(--fz-11);
  color: var(--accent);
  background: rgba(31,58,138,0.08);
  border: 1px solid var(--accent-soft, var(--line));
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  letter-spacing: 0.04em;
  align-self: center;
  white-space: nowrap;
}
.refine-box__aim {
  grid-column: 2 / -1;
  grid-row: 2;
  font-size: var(--fz-12);
  color: var(--ink-soft);
  line-height: var(--lh-snug);
}
/* 우상단 ✓ — 선택 시 fade in */
.refine-box__check {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-on, #fff);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--dur-2) var(--easing-standard),
              transform var(--dur-2) var(--easing-emphasis);
}
.refine-box.is-selected .refine-box__check {
  opacity: 1;
  transform: scale(1);
}
:root[data-theme="dark"] .refine-box__axis {
  background: rgba(138,180,248,0.14);
  border-color: rgba(138,180,248,0.32);
}

/* 보강 섹션 메타 (페이지 상단에서 이동) */
.tutor-refine__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.tutor-refine__meta .tutor-meta__row {
  grid-template-columns: 48px 1fr;
  gap: 8px;
}
@media (max-width: 720px) {
  .tutor-refine__meta { grid-template-columns: 1fr; }
}

/* 선택 카운트 칩 (head 우측) */
.tutor-refine__count {
  /* head는 grid(auto 1fr auto) — 자동으로 col 3에 자리 잡혀 우측 정렬 */
  justify-self: end;
  font-size: var(--fz-12);
  font-weight: 600;
  color: var(--accent);
  background: rgba(31,58,138,0.10);
  border: 1px solid var(--accent-soft, var(--line));
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background var(--dur-2), color var(--dur-2);
}
.tutor-refine__count[data-empty="true"] {
  color: var(--ink-mute);
  background: rgba(74,88,116,0.08);
  border-color: var(--line);
}
:root[data-theme="dark"] .tutor-refine__count {
  background: rgba(138,180,248,0.16);
}

.tutor-refine__note {
  display: flex; flex-direction: column; gap: 6px;
}
.tutor-refine__note .t-caption {
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.tutor-refine__note textarea {
  resize: vertical;
  min-height: 64px;
  font-family: var(--font-sans);
  font-size: var(--fz-14);
}

.tutor-refine__foot {
  display: flex; justify-content: flex-end;
}
.tutor-refine__submit {
  display: inline-flex; align-items: center; gap: 8px;
}
.tutor-refine__submit.is-loading { opacity: 0.7; pointer-events: none; }

/* 결과 비교 패널 — 슬라이드다운 */
.tutor-refine__compare {
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column;
  gap: var(--space-3);
  animation: refineSlideIn var(--dur-4) var(--easing-emphasis);
}
@keyframes refineSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tutor-refine__cmp-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.tutor-refine__cmp-title {
  margin: 0;
  font-size: var(--fz-16);
  color: var(--ink-strong);
}
.tutor-refine__cmp-delta {
  font-family: var(--font-mono);
  font-size: var(--fz-13);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: rgba(74,88,116,0.12);
  color: var(--ink-mute);
}
.tutor-refine__cmp-delta[data-tone="pos"] {
  color: var(--accent-on);
  background: var(--accent);
}
.tutor-refine__cmp-delta[data-tone="neg"] {
  color: var(--accent);
  background: rgba(31,58,138,0.16);
  border: 1px solid var(--accent-soft);
}
:root[data-theme="dark"] .tutor-refine__cmp-delta[data-tone="neg"] {
  color: var(--accent);
  background: rgba(138,180,248,0.18);
}
.tutor-refine__cmp-warn {
  font-size: var(--fz-12);
  color: var(--warn);
  background: rgba(201,130,31,0.12);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.tutor-refine__cmp-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.tutor-refine__cmp-col {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.tutor-refine__cmp-col .t-caption {
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tutor-refine__cmp-text {
  background: var(--surface-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  max-height: 360px;
  overflow-y: auto;
  font-size: var(--fz-14);
  line-height: var(--lh-base);
  color: var(--ink);
  word-break: break-word;
}
.tutor-refine__cmp-text h1 { font-size: var(--fz-18); margin: 0 0 8px; }
.tutor-refine__cmp-text h2 { font-size: var(--fz-16); margin: 16px 0 6px; color: var(--accent); }
.tutor-refine__cmp-text p  { margin: 0 0 10px; }
.refine-cmp__hint { color: var(--ink-faint); font-style: italic; }
.refine-cmp__err  { color: var(--err); margin: 0; }

.tutor-refine__cmp-foot {
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
}

@media (max-width: 980px) {
  .tutor-refine__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tutor-refine__cmp-body {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .tutor-refine__grid {
    grid-auto-flow: column;
    grid-auto-columns: 76%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
  }
  .refine-box { scroll-snap-align: start; }
}