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

/* ───── 페이지 헤더 ───── */
/* 2026-05-14 v2 — nav↔topbar 5 / topbar↔shell 5 균등.
   옛 padding-top 5px + topbar margin-top 5px 누적 → nav↔topbar 10px이라 비대칭이라는 사용자 보고.
   main padding-top 0 + topbar margin 5px auto만 적용 → 두 간격 정확히 5px씩. */
.tutor-main { padding-top: 0; 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;
  /* 빨간 점선 underline과 색상 통일 — 점선 + 반투명으로 시각 위계 (점선/dot는 또렷, 곡선은 흐릿) */
  stroke: #dc2626;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 4 4;
  opacity: 0.45;
  transition: opacity var(--dur-2) var(--easing-standard),
              stroke-width var(--dur-2) var(--easing-standard);
}
.tutor-arrow.is-active {
  stroke-width: 2.2;
  opacity: 0.7;
  filter: drop-shadow(0 0 6px rgba(220,38,38,0.30));
}
.tutor-arrow.is-stale {
  stroke: #dc2626;
  opacity: 0.20;
}

/* ───── 좌: 에디터 ───── */
.tutor-pane--editor {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
/* WHY: 액션 버튼 라인을 최상위로 → 제목 입력은 아래 줄. column stack으로 행 분리.
        gap은 버튼 라인과 큰 제목 입력 사이에 시각적 호흡을 주기 위해 space-4(16px). */
.tutor-editor__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: stretch;
}
/* 2026-05-14 — 에디터 head 버튼 그룹(코칭/맞춤법/초안 비우기/모드/서체/글자크기 등)이
   모바일에서 가로 overflow되던 버그(사용자 스크린샷 보고). flex+wrap으로 자연 줄바꿈.
   기존엔 inline 요소들이 그냥 한 줄에 쌓여 viewport 폭 초과 시 화면 밖으로 잘림. */
.tutor-editor__btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* 2026-05-14 UX 그룹화 — 버튼을 성격별 그룹으로 묶고 사이에 시각적 divider.
   group--analyze | group--display | group--end(우측 끝, 위험 액션) */
.tutor-editor__group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tutor-editor__group + .tutor-editor__group:not(.tutor-editor__group--end) {
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--line);
}
.tutor-editor__group--end {
  margin-left: auto;  /* 위험 액션을 우측 끝으로 격리 */
}
@media (max-width: 720px) {
  /* 모바일에서 wrap되면 divider 시각 노이즈 → 제거하고 gap만 유지. */
  .tutor-editor__group + .tutor-editor__group:not(.tutor-editor__group--end) {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
  }
  .tutor-editor__group--end {
    margin-left: 0;  /* 좁은 화면에선 자연스러운 wrap에 맡김 */
  }
}
@media (max-width: 600px) {
  /* 모바일 컴팩트 — 패딩/폰트 축소로 횡 공간 절약. */
  .tutor-editor__btns .btn,
  .tutor-editor__action,
  .tutor-editor__spellcheck,
  .tutor-editor__reset {
    padding: 6px 10px;
    font-size: var(--fz-12);
  }
  .tutor-mode-pick__btn { padding: 3px 8px; }
  .fpick__btn { padding: 4px 8px; font-size: var(--fz-12); }
  .fsize-pick__btn { padding: 2px 6px; }
  /* fpick--right의 margin-left:auto는 큰 화면용 — 모바일에선 자연 wrap. */
  .fpick--right { margin-left: 0; }
}
.tutor-editor__title {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid var(--line);
  background: transparent;
  font-weight: 600;
  font-family: var(--font-serif);
  line-height: var(--lh-tight);
  /* 2026-05-14 — base * editor-font-scale (toggle 반영). */
  font-size: calc(var(--fz-24) * var(--editor-font-scale, 1));
  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); }

/* WHY: 다른 액션 버튼들(.tutor-editor__action--coach 등)과 시각 위계 통일 — outline accent 패턴. */
.tutor-editor__reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
  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),
              border-color var(--dur-2) var(--easing-standard),
              color var(--dur-2) var(--easing-standard);
}
.tutor-editor__reset:hover {
  background: rgba(31,58,138,0.08);
}
:root[data-theme="dark"] .tutor-editor__reset:hover {
  background: rgba(138,180,248,0.14);
}

.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);
  flex-wrap: wrap;
}
.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__auto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(31,58,138,0.20);
  background: rgba(31,58,138,0.08);
  color: var(--accent);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  font-size: var(--fz-12);
  cursor: pointer;
  transition: transform var(--dur-2) var(--easing-standard),
              border-color var(--dur-2) var(--easing-standard),
              opacity var(--dur-2) var(--easing-standard);
}
.tutor-section__auto:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(31,58,138,0.34);
}
.tutor-section__auto:disabled {
  opacity: 0.45;
  cursor: default;
}
.tutor-section__auto-status {
  font-size: var(--fz-12);
  color: var(--ink-faint);
}
.tutor-section__magic {
  line-height: 1;
}

.tutor-refine__intensity {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tutor-refine__intensity-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tutor-refine__intensity-copy {
  margin: 0;
  color: var(--ink-mute);
  font-size: var(--fz-13);
}
.tutor-refine__intensity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
/* WHY: .refine-box(6박스 액션 카드)와 시각적 통일 — solid accent border + glow shadow + ✓ 배지 */
.refine-intensity {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  padding-right: calc(14px + 18px); /* ✓ 우상단 자리 */
  background: var(--surface-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--easing-standard),
              background var(--dur-2),
              box-shadow var(--dur-3),
              transform var(--dur-2);
}
.refine-intensity: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-intensity:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.refine-intensity input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.refine-intensity.is-selected {
  border-color: var(--accent);
  background: rgba(31,58,138,0.08);
  box-shadow: var(--shadow-glow);
}
:root[data-theme="dark"] .refine-intensity.is-selected {
  background: rgba(138,180,248,0.12);
}
.refine-intensity__title {
  color: var(--ink-strong);
  font-weight: 600;
  font-size: var(--fz-15);
}
.refine-intensity__desc {
  color: var(--ink-soft);
  font-size: var(--fz-12);
  line-height: var(--lh-snug);
}
/* 우상단 ✓ — 선택 시 fade in (.refine-box__check와 동일) */
.refine-intensity__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-intensity.is-selected .refine-intensity__check {
  opacity: 1;
  transform: scale(1);
}
@media (max-width: 840px) {
  .tutor-refine__intensity-grid {
    grid-template-columns: 1fr;
  }
}

.tutor-section__editable {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  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);
  /* 2026-05-14 — 작성 영역 글자 크기 토글 적용. base * editor-font-scale.
     --editor-font-scale은 :root[data-editor-fsize]별로 07-misc.css에 정의(default 1). */
  font-size: calc(var(--fz-16) * var(--editor-font-scale, 1));
  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;
  user-select: none;
}
.tutor-section__editable[data-empty="true"]:focus::before {
  content: "";
}
.tutor-section[data-section="body"] .tutor-section__editable {
  min-height: 200px;
}

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

/* ───── 우: 코치 패널 ─────
   2026-05-12 v8: sticky 복원 — 우측 가이드 패널이 viewport에 stick하면서 자기 영역 안에서
   스크롤되는 "2열 독립 스크롤" 패턴이 사용자가 기대한 동작.
   v7에서 sticky를 제거했더니 좌측 본문이 길 때 우측이 row 상단에 머물러 페이지 스크롤로
   사라지는 현상("내려오지 않는다") 발생 → 원복.
   진짜 문제였던 것은 .tutor-coach__list의 중첩 overflow였고, 그것만 제거(아래 룰 참조). */
.tutor-pane--coach {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-self: start;
  position: sticky;
  top: 72px;
  max-height: calc(100dvh - 72px);
  overflow: visible;
}

/* 2026-05-12: 패널 접기/펼치기 토글 — 코칭 제안 & 튜터 코멘트.
   접힌 상태는 head만 표시 → 다른 섹션이 자연 공간 확보.
   사용자: "코칭제안을 접기하면 튜터 코멘트가 올라와서 볼 수 있다". */
.tutor-panel-collapse {
  border: 0;
  background: transparent;
  width: 24px; height: 24px;
  border-radius: 50%;
  color: var(--ink-mute);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-1) var(--easing-standard),
              transform var(--dur-2) var(--easing-standard),
              color var(--dur-1) var(--easing-standard);
}
.tutor-panel-collapse:hover {
  color: var(--accent);
  background: rgba(31, 58, 138, 0.06);
}
.tutor-panel-collapse[aria-expanded="false"] {
  transform: rotate(-90deg);
}
/* 코칭 제안 접힘 — head만 표시 */
.tutor-coach-suggest.is-collapsed > .tutor-coach-suggest__list,
.tutor-coach-suggest.is-collapsed > .tutor-coach-suggest__status,
.tutor-coach-suggest.is-collapsed > .tutor-coach-suggest__pager {
  display: none !important;
}
/* 튜터 코멘트 접힘 — head만 표시.
   pane 직접 자식 중 코멘트 영역(empty/list/popup이 동적 삽입한 pager)만 숨김.
   코칭 제안(.tutor-coach-suggest)과 통계 뱃지(.tutor-top-launchers)는 그대로 노출. */
.tutor-pane--coach.is-comment-collapsed > .tutor-coach__empty,
.tutor-pane--coach.is-comment-collapsed > .tutor-coach__list,
.tutor-pane--coach.is-comment-collapsed > nav.tutor-coach-suggest__pager {
  display: none !important;
}
.tutor-coach__head {
  display: grid;
  /* 2026-05-12: 토글 버튼 자리 — [dot][title-1fr][toggle] */
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  column-gap: 10px;
  padding: 4px 4px 12px;
  border-bottom: 1px dashed var(--line);
}
.tutor-coach__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__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);
  /* 2026-05-12 v8: overflow-y 없음 — 카드는 자연 흐름으로 펼치고, 긴 콘텐츠는
     상위 .tutor-pane--coach의 자체 스크롤로 따라옴(중첩 overflow 회피).
     20줄 이내 코멘트는 스크롤 없이 노출 — pane max-height 안에 다 들어가면
     pane 스크롤바도 안 보임(overflow-y: auto가 콘텐츠 초과 시에만 발현). */
}

/* 튜터 코멘트 카드 — 카드 밖 번짐이 없도록 outline만 유지한다. */
.tutor-coach-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);
}
.tutor-coach-card::before { display: none !important; }
.tutor-coach-card:hover {
  border-color: var(--accent-soft, var(--line-strong));
  box-shadow: none;
  transform: none;
}
:root[data-theme="dark"] .tutor-coach-card {
  background: var(--surface-glass);
  border-color: var(--line);
  box-shadow: none;
}
.tutor-coach-card.is-active {
  border-color: var(--accent);
  box-shadow: none;
}
.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;
}
.tutor-coach-card__samples {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tutor-coach-card__sample {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(31, 58, 138, 0.035);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--easing-standard),
              background var(--dur-1) var(--easing-standard);
}
.tutor-coach-card__sample:hover,
.tutor-coach-card__sample.is-picked {
  border-color: rgba(31, 58, 138, 0.34);
  background: rgba(31, 58, 138, 0.08);
}
:root[data-theme="dark"] .tutor-coach-card__sample {
  background: rgba(138, 180, 248, 0.055);
}
:root[data-theme="dark"] .tutor-coach-card__sample:hover,
:root[data-theme="dark"] .tutor-coach-card__sample.is-picked {
  border-color: rgba(138, 180, 248, 0.36);
  background: rgba(138, 180, 248, 0.12);
}
.tutor-coach-card__sample-label {
  display: inline-flex;
  align-items: center;
  margin-bottom: 4px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  color: var(--accent);
  background: rgba(31, 58, 138, 0.08);
  font-size: var(--fz-11);
  font-weight: 700;
}
.tutor-coach-card__sample p {
  margin: 0;
}
.tutor-coach-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
}
.tutor-coach-card__apply,
.tutor-coach-card__copy,
.tutor-coach-card__undo {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  font-size: var(--fz-12);
  font-weight: 700;
  cursor: pointer;
}
.tutor-coach-card__apply {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-on);
}
.tutor-coach-card__copy {
  background: transparent;
  color: var(--accent);
}
.tutor-coach-card__apply:disabled,
.tutor-coach-card__copy:disabled {
  opacity: 0.45;
  cursor: wait;
}
.tutor-coach-card__apply-status {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(30,122,90,0.08);
  color: var(--ok);
  font-size: var(--fz-12);
  line-height: var(--lh-snug);
}
.tutor-coach-card__undo {
  margin-left: 6px;
  padding: 2px 7px;
  background: transparent;
  color: var(--ok);
}
/* 2026-05-12: LLM 응답 대기/오류 상태 — placeholder 톤 분리. */
.tutor-coach-card__body[data-state="loading"] {
  color: var(--ink-mute);
  font-style: italic;
}
.tutor-coach-card__body[data-state="error"] {
  color: var(--err);
}
.tutor-coach-card__spinner {
  display: inline-block;
  margin-right: 4px;
  animation: tutor-spin 1.4s linear infinite;
}
@keyframes tutor-spin {
  0%   { opacity: 0.4; transform: rotate(0deg); }
  50%  { opacity: 1;   transform: rotate(180deg); }
  100% { opacity: 0.4; transform: rotate(360deg); }
}

/* ───── 드래그-팝업 (body 직속) — 2026-05-14 2×2 큐브 그리드 재설계 ─────
   기존: 1행 4열 inline-flex pill 형태 → 폭 좁은 우측 패널에서 라벨 줄바꿈/잘림 발생.
   변경: 2열 2행 정사각형 큐브 그리드 — 폭 안정 + 시각 위계 통일 + 모바일 친화. */
.tutor-popup {
  position: absolute;
  z-index: var(--z-popover);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 4px;
  padding: 6px;
  width: 180px;          /* 큐브 2개 × 84px + gap 4px + padding 12px ≈ 180 */
  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-lg);
  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);
}
/* hidden 속성이 display:grid에 밀리면 투명 팝업이 hover를 받아 말풍선을 띄운다. */
.tutor-popup[hidden] {
  display: none !important;
  pointer-events: none;
}
.tutor-popup.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.tutor-popup__btn {
  /* 정사각형 큐브 — aspect-ratio 1로 폭에 맞춰 자동 높이. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  gap: 6px;
  padding: 8px 4px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  font-size: var(--fz-12);
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  line-height: 1.25;
  transition: background var(--dur-1) var(--easing-standard),
              border-color var(--dur-1) var(--easing-standard),
              color var(--dur-1) var(--easing-standard),
              transform var(--dur-1) var(--easing-standard);
}
.tutor-popup__btn:hover {
  background: rgba(31, 58, 138, 0.10);
  border-color: rgba(31, 58, 138, 0.30);
  color: var(--accent);
  transform: translateY(-1px);
}
:root[data-theme="dark"] .tutor-popup__btn {
  background: rgba(138, 180, 248, 0.06);
}
:root[data-theme="dark"] .tutor-popup__btn:hover {
  background: rgba(138, 180, 248, 0.14);
  border-color: rgba(138, 180, 248, 0.32);
}
.tutor-popup__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  background: rgba(31, 58, 138, 0.10);
  border-radius: 50%;
}
:root[data-theme="dark"] .tutor-popup__icon {
  background: rgba(138, 180, 248, 0.14);
}
.tutor-popup__label {
  white-space: normal;   /* 라벨이 큐브 안에서 자연 줄바꿈 — "문장 줄이기" 등 2단어도 OK */
  word-break: keep-all;
  letter-spacing: -0.01em;
}

/* ───── 2026-05-14 v2 — 큐브 hover 디자인 툴팁 (body 직속 portal) ─────
   ::after 방식은 부모 .tutor-popup의 backdrop-filter(blur)가 stacking context를 만들어
   pseudo의 색이 반투명하게 합성되는 문제 → JS로 body 직속에 단일 element 렌더로 변경.
   이로써 부모의 모든 filter/transform/opacity 영향에서 완전 격리. */
.tutor-popup-tip {
  position: fixed;
  z-index: var(--z-toast, 9999);  /* popup(z-popover)보다 위 */
  pointer-events: none;
  padding: 8px 12px;
  /* 완전 불투명 solid 배경 — body 직속이라 어떤 부모 효과도 합성되지 않음 */
  background: #0E1730;
  color: #FFFFFF;
  font-size: var(--fz-12, 12px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(14, 28, 64, 0.45),
              0 2px 6px rgba(14, 28, 64, 0.28),
              0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  white-space: nowrap;
  max-width: 240px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--dur-2) var(--easing-emphasis),
              transform var(--dur-2) var(--easing-emphasis);
}
.tutor-popup-tip.is-open {
  opacity: 1;
  transform: translateY(0);
}
/* arrow tail — 큐브를 가리키는 작은 삼각형. left는 JS가 --tip-arrow-x로 주입. */
.tutor-popup-tip::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--tip-arrow-x, 50%);
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: #0E1730;
  transform: translateX(-50%);
}
/* 다크 모드 */
:root[data-theme="dark"] .tutor-popup-tip {
  background: #2E50B5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6),
              0 2px 6px rgba(0, 0, 0, 0.35),
              0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
:root[data-theme="dark"] .tutor-popup-tip::before {
  border-bottom-color: #2E50B5;
}

/* ───── 하단 통계 8카드 (G1/G7/G8: 로컬 / G2~G6: 분석) ─────
   2026-05-11: 통계는 모달 단일 경로로 통일 → .tutor-stats--hidden + hidden 속성으로 화면 차단.
   하지만 .tutor-stats { display: grid }가 UA의 [hidden]{display:none}보다 우선해 무력화되는 함정이
   있어(같은 코드 다른 위치의 refine compare 패널에서 동일 사례) [hidden] 우선순위 회복 규칙을 박는다.
   DOM은 모달 buildClones(cloneNode)가 클론 소스로 의존해 유지. */
.tutor-stats {
  display: grid;
  /* 데스크탑: 2열 기본. 가로형 그래프는 풀폭으로 사용 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.tutor-stats[hidden],
.tutor-stats--hidden { display: none !important; }
.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; /* 풀폭 — 가독성 우선 */
}
/* G2: 네트워크 그래프 — 가로폭이 길수록 노드 라벨 가독성 ↑ */
.tutor-stat[data-stat="g2"] {
  grid-column: 1 / -1;
}
/* G6: 시계열 그래프 — 가로폭이 길수록 X축 라벨 가독성 ↑ */
.tutor-stat[data-stat="g6"] {
  grid-column: 1 / -1;
}
/* G7/G8: 감정 흐름/비율 — 구간 라벨과 두 게이지를 안정적으로 배치 */
.tutor-stat[data-stat="g7"],
.tutor-stat[data-stat="g8"] {
  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); }

/* 2026-05-13 — single 모드(한 묶음 입력)에서 의미가 사라지는 카드(G1·G5) 표시.
   hidden이 아닌 dimmed로 두어 사용자가 "왜 측정이 안 되는지" 즉시 인지 가능하게.
   pointer-events:none — 차트와 라벨 클릭/호버를 모두 차단해 noise 방지. */
.tutor-stat.is-mode-blocked {
  opacity: 0.55;
  filter: saturate(0.6);
  pointer-events: none;
  position: relative;
}
.tutor-stat.is-mode-blocked .tutor-stat__mode-note {
  margin-left: auto;
  font-size: var(--fz-11, 11px);
  color: var(--ink-mute);
  background: rgba(31,58,138,0.06);
  border: 1px dashed var(--line);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
:root[data-theme="dark"] .tutor-stat.is-mode-blocked .tutor-stat__mode-note {
  background: rgba(138,180,248,0.10);
  border-color: rgba(138,180,248,0.30);
  color: var(--ink-soft);
}
/* mode-note가 있으면 badge/warn은 그 다음 줄로 — head의 wrap 허용. */
.tutor-stat.is-mode-blocked .tutor-stat__head {
  flex-wrap: wrap;
  row-gap: 4px;
}

/* G2 돋보기 컨트롤 — header 우측에 +/-/reset 버튼 그룹 */
.tutor-stat__zoom {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
}
.tutor-stat__zoom-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: rgba(31,58,138,0.04);
  color: var(--ink-mute);
  border-radius: var(--radius-pill);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-2) var(--easing-standard), color var(--dur-2) var(--easing-standard);
}
.tutor-stat__zoom-btn:hover { background: rgba(31,58,138,0.12); color: var(--accent); }
.tutor-stat__zoom-btn:active { transform: translateY(1px); }
/* zoom 그룹이 있으면 badge는 margin-left 자동 해제 (zoom이 이미 auto로 밀어둠) */
.tutor-stat__zoom + .tutor-stat__badge { margin-left: 0; }
.tutor-stat__sub {
  margin: 0;
  font-size: var(--fz-12);
  color: var(--ink-mute);
  line-height: var(--lh-snug);
}
/* 보조 부제 — 장르별 climax 의미 한 줄 (G6 카드에서 두 번째 .sub로 사용). */
.tutor-stat__sub--aux {
  margin-top: 2px;
  font-size: var(--fz-11, 11px);
  color: var(--ink-faint);
}

/* ECharts 컨테이너 */
.tutor-echart {
  width: 100%;
  height: 220px;
  position: relative;
}
.tutor-stat--echart[data-stat="g2"] .tutor-echart { height: 390px; } /* 노드 잘림 회피 — 30% 확대 */
.tutor-stat--echart[data-stat="g5"] .tutor-echart { height: 220px; }
.tutor-stat--echart[data-stat="g6"] .tutor-echart { height: 280px; }
.tutor-stat--echart[data-stat="g7"] .tutor-echart { height: 250px; }

/* G8 — SVG Liquid Gauge */
.tutor-liquid-gauge {
  min-height: 230px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: var(--space-4);
  position: relative;
}
.tutor-liquid-gauge__item {
  width: min(220px, 100%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.tutor-liquid-gauge__svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 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;
}
.tutor-stat[data-stat="g7"].is-empty .tutor-echart::after {
  content: "감정어가 쌓이면 표시됩니다";
}
.tutor-stat.is-empty .tutor-liquid-gauge {
  background: rgba(31,58,138,0.03);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
}
.tutor-stat.is-empty .tutor-liquid-gauge::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);
}
/* G1 3섹션 — 글 흐름 의미 정렬형 다채색 (서:coral / 본:indigo / 결:teal).
   solid color로 통일 — opacity·gradient 변주는 가독성 손실이라 제거. */
.tutor-bar__seg[data-seg="intro"]      { background: var(--graph-intro); }
.tutor-bar__seg[data-seg="body"]       { background: var(--graph-body); }
.tutor-bar__seg[data-seg="conclusion"] { background: var(--graph-conclusion); }
.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: var(--graph-intro); }
.dot--body       { background: var(--graph-body); }
.dot--conclusion { background: var(--graph-conclusion); }

/* 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);
}

/* ───── 반응형 (태블릿 baseline 7~11", 768~1024px portrait/landscape) ───── */

/* 태블릿 landscape (1024~1180): stats 2-col 유지 */
@media (max-width: 1180px) {
  .tutor-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tutor-stat[data-stat="g1"] { grid-column: 1 / -1; }
  .tutor-stat[data-stat="g2"] { grid-column: 1 / -1; }
  .tutor-stat[data-stat="g6"] { grid-column: 1 / -1; }
  .tutor-stat[data-stat="g7"],
  .tutor-stat[data-stat="g8"] { grid-column: 1 / -1; }
}

/* 2026-05-12 v5: 9인치 이하(≤1024px, iPad 9.7" landscape 경계) → 우측 패널 본문 하단으로 이동.
   v4의 1180px은 너무 광범위해 일반 노트북에서도 1열이 되는 문제 → 1024px로 축소.
   JS가 DOM에서 .tutor-pane--coach를 .tutor-refine 직전으로 옮긴다 (footer 다음, 보강편집 위).
   sticky 해제 + 화살표 숨김 + 본문 흐름에 자연 배치. */
@media (max-width: 1024px) {
  .tutor-head { grid-template-columns: 1fr; }
  .tutor-shell { grid-template-columns: 1fr; gap: var(--space-4); }
  .tutor-pane--editor { padding: var(--space-4) var(--space-5); }
  .tutor-pane--coach {
    position: static;     /* sticky 해제 — 본문 흐름에 자연 배치 */
    max-height: none;
    /* 2026-05-12 v6: editorPane(flex column)의 flex item이 되었을 때 align-self:start가
       cross-axis 폭을 컨텐츠 크기로 줄임 → 접힌 상태에서 헤더 폭이 짧아지는 버그.
       align-self: stretch + width:100%로 풀폭 강제. 펼침/접힘 무관하게 동일 폭. */
    align-self: stretch;
    width: 100%;
  }
  .tutor-arrows { display: none; }
  /* 페이저 — "끝" 버튼은 좁은 폭에서 숨겨 공간 확보 */
  .tutor-coach-suggest__pager-btn--last { display: none; }
  .tutor-coach-suggest__pager-nums { min-width: 0; overflow: hidden; flex-shrink: 1; }
  /* 통계분석/임시저장 뱃지 hint 숨김 + nowrap */
  .tutor-stats-launcher__hint { display: none; }
  .tutor-stats-launcher__btn { white-space: nowrap; padding: 6px 10px; }
  .tutor-stats-launcher__label { overflow: hidden; text-overflow: ellipsis; }
}

/* 모바일 (≤600px): 추가 콤팩트화 — 위 1180px 블록과 누적. */
@media (max-width: 600px) {
  .tutor-stats { grid-template-columns: 1fr; }
  .tutor-stat[data-stat="g1"] { grid-column: auto; }
  .tutor-stat[data-stat="g6"] { grid-column: auto; }
  .tutor-stat[data-stat="g7"],
  .tutor-stat[data-stat="g8"] { grid-column: auto; }
  .tutor-liquid-gauge { grid-template-columns: 1fr; }
  .tutor-pane--editor { padding: var(--space-4); }
  .tutor-stat { padding: var(--space-4); }
  /* 2026-05-14 — 2×2 큐브로 재설계되어 라벨이 큐브의 핵심 정보. display:none 제거.
     모바일에서도 큐브 폭을 살짝 줄여 좁은 화면 대응. */
  .tutor-popup { width: 168px; padding: 5px; gap: 4px; }
  .tutor-popup__btn { padding: 6px 3px; font-size: var(--fz-11); }
  .tutor-popup__icon { width: 24px; height: 24px; font-size: 16px; }
}

/* 태블릿 터치 타겟 보강 — 버튼/셀렉터 최소 44px */
@media (min-width: 600px) and (max-width: 1024px) {
  .tutor-editor__action,
  .tutor-editor__spellcheck,
  .tutor-meta__select,
  .refine-box {
    min-height: 44px;
  }
  .tutor-editor__action { padding: 8px 16px; }
}



/* ──────────────────────────────────────────────────────────────────────
 * 코칭 패널 접힘 시 화살표 SVG도 함께 숨김 (고아 path 방지)
 * ────────────────────────────────────────────────────────────────────── */
.tutor-shell:has(.tutor-coach-suggest.is-collapsed) > .tutor-arrows,
.tutor-shell:has(.tutor-pane--coach.is-comment-collapsed) > .tutor-arrows {
  display: none;
}

/* ──────────────────────────────────────────────────────────────────────
 * 두 열 독립 스크롤 (desktop only, 1025px+)
 *   - 우측 pane이 sticky로 viewport에 고정 + 자기 max-height 안에서 overflow-y 스크롤.
 *   - 이게 사용자가 기대한 "2열 자체 스크롤" 동작 — 페이지 스크롤로 좌측 본문을
 *     읽으면서 우측 가이드는 viewport에 머물러 있고, 우측 콘텐츠가 길면 pane 자체
 *     스크롤바로 위/아래 이동.
 *   - 내부 .tutor-coach__list는 overflow 없음(자연 흐름) → 카드 박스 내부에 스크롤이
 *     갇히는 v7 이전 회귀 회피. 긴 코멘트는 pane 자체 스크롤로 따라옴.
 *   - 모바일(≤1024px)에서는 coach pane이 DOM 이동되므로 적용 X.
 * ────────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  .tutor-pane--coach {
    position: sticky;
    top: var(--space-4);
    max-height: calc(100vh - var(--space-8));
    overflow-y: auto;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .tutor-pane--coach:hover {
    scrollbar-color: var(--accent) transparent;
  }
  /* Webkit (Chromium, Safari) */
  .tutor-pane--coach::-webkit-scrollbar {
    width: 8px;
  }
  .tutor-pane--coach::-webkit-scrollbar-track {
    background: transparent;
  }
  .tutor-pane--coach::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 4px;
    transition: background var(--dur-2) var(--easing-standard);
  }
  .tutor-pane--coach::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * 통합 글자수 임계 표현 (2026-05-12) — BFF GLOBAL_INPUT_MAX_CHARS=10000과 동기.
 *
 *   상태 (data-length-state on .tutor-main, JS가 통합 합산으로 설정):
 *     normal   < 7,000자  — 기본
 *     warning  ≥ 7,000자  — 주황 (70%, 한도 주의)
 *     danger   ≥ 9,000자  — 빨강 (90%, 한도 임박)
 *     over     ≥ 10,000자 — 진한 빨강 (한도 도달, paste soft-block)
 *
 *   동기 시각 대상 (single attribute → 3 textarea + 통합 카운터 + aria 상태):
 *     - .tutor-section__editable (3개) border-color
 *     - .tutor-editor__total / strong color
 *     - .tutor-editor__limit-status (aria-live 텍스트) color
 *
 *   접근성: 색만으로 정보를 전달하지 않도록 aria-live="polite" 텍스트가
 *   "주의: N자 남음" 식으로 동기 갱신 — WCAG 1.4.1 부합.
 * ────────────────────────────────────────────────────────────────────── */
:root {
  --length-warning: #B07A3F;   /* 주황 — brand-copper와 정렬 */
  --length-danger:  #DC2626;   /* 빨강 — red-600 */
  --length-over:    #B91C1C;   /* 진한 빨강 — red-700 */
}
:root[data-theme="dark"] {
  --length-warning: #D9A35E;   /* 다크 배경에 잘 보이게 살짝 밝게 */
  --length-danger:  #F87171;
  --length-over:    #EF4444;
}

/* 3개 textarea 동일 색 — 통합 합산 상태 한 곳에서 동시 반영 */
.tutor-main[data-length-state="warning"] .tutor-section__editable {
  border-color: var(--length-warning);
}
.tutor-main[data-length-state="danger"] .tutor-section__editable {
  border-color: var(--length-danger);
}
.tutor-main[data-length-state="over"] .tutor-section__editable {
  border-color: var(--length-over);
  border-width: 2px;  /* 한도 도달 — 굵기 강조 */
}

/* 통합 카운터 강조 */
.tutor-editor__total {
  font-size: var(--fz-13);
  color: var(--ink-mute);
  transition: color var(--dur-2) var(--easing-standard);
}
.tutor-editor__total strong { color: var(--ink-strong); }
.tutor-main[data-length-state="warning"] .tutor-editor__total,
.tutor-main[data-length-state="warning"] .tutor-editor__total strong {
  color: var(--length-warning);
}
.tutor-main[data-length-state="danger"] .tutor-editor__total,
.tutor-main[data-length-state="danger"] .tutor-editor__total strong {
  color: var(--length-danger);
}
.tutor-main[data-length-state="over"] .tutor-editor__total,
.tutor-main[data-length-state="over"] .tutor-editor__total strong {
  color: var(--length-over);
  font-weight: 700;
}

/* aria-live 상태 텍스트 — 시각 보조 + 스크린리더용. inline 노출(sr-only 아님). */
.tutor-editor__limit-status {
  display: inline-block;
  margin-left: var(--space-3);
  font-size: var(--fz-12);
  color: var(--ink-mute);
  transition: color var(--dur-2) var(--easing-standard);
}
.tutor-main[data-length-state="warning"] .tutor-editor__limit-status {
  color: var(--length-warning);
}
.tutor-main[data-length-state="danger"] .tutor-editor__limit-status,
.tutor-main[data-length-state="over"] .tutor-editor__limit-status {
  color: var(--length-danger);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .tutor-section__editable,
  .tutor-editor__total,
  .tutor-editor__limit-status { transition: none; }
}

/* ──────────────────────────────────────────────────────────────────────
 * 스케치 모드 토글 (2026-05-12) — 본문 입력 구조 자율 선택.
 *
 *   data-editor-mode on .tutor-main:
 *     "tri"    (default): 서·본·결 3-segment (현재 동작)
 *     "single": 한 묶음 (intro/conclusion section hide, body만 노출)
 *
 *   원칙: CSS hide만 — DOM/데이터 보존, 임의 mode 전환으로 복원 가능.
 *   장르 default 추천: 일기·편지·감상문·회고 → single, 나머지 → tri.
 *   사용자 명시 토글이 있으면 그 값 우선 (localStorage).
 * ────────────────────────────────────────────────────────────────────── */

/* 스케치 모드 — .tutor-editor__btns 내부 컴팩트 인라인 토글.
   별도 행 없이 작업 버튼 행에 흡수돼 본문 가독성 위한 수직 공간 보존. */
.tutor-mode-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tutor-mode-pick__icon {
  font-size: 14px;
  line-height: 1;
  color: var(--accent);
  user-select: none;
}
.tutor-mode-pick__seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: rgba(31, 58, 138, 0.06);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
:root[data-theme="dark"] .tutor-mode-pick__seg {
  background: rgba(138, 180, 248, 0.10);
  border-color: rgba(138, 180, 248, 0.20);
}
.tutor-mode-pick__btn {
  border: 0;
  background: transparent;
  padding: 4px 10px;
  font-size: var(--fz-12);
  font-weight: 600;
  color: var(--ink-mute);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-2) var(--easing-standard),
              color var(--dur-2) var(--easing-standard);
}
.tutor-mode-pick__btn:hover { color: var(--accent); background: rgba(31, 58, 138, 0.08); }
.tutor-mode-pick__btn[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 3px rgba(31, 58, 138, 0.25);
}
:root[data-theme="dark"] .tutor-mode-pick__btn[aria-pressed="true"] {
  background: var(--accent);
  color: #0A1226;
}
/* sr-only — aria-live hint는 스크린리더 동기, 시각 영역에서 제외 (WCAG 1.4.1 보강) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ──────────────────────────────────────────────────────────────────────
 * 2026-05-13 — 2단계 stepper UX.
 *   data-step="1" : 작성·분석·코칭 영역(.tutor-shell + 부속 모달)만 보임. .tutor-result는 hidden.
 *   data-step="2" : 결과 영역만 보임. tutor-shell/meta-bar 등 1단계 컨테이너는 hidden.
 *                   meta-bar는 step 2 미리보기에 영향 없으므로 1단계 화면용으로만 유지.
 *   guided.html의 step1-3과 달리 stepper만 항상 표시(상단 헤더 역할).
 * ────────────────────────────────────────────────────────────────────── */
.tutor-main[data-step="1"] .tutor-result { display: none; }
.tutor-main[data-step="2"] .tutor-meta-bar,
.tutor-main[data-step="2"] .tutor-shell,
.tutor-main[data-step="2"] .tutor-arrows { display: none; }

/* ──────────────────────────────────────────────────────────────────────
 * 2026-05-13 — Tutor 상단 1행 통합 topbar.
 *   기존 2행(stepper + meta-bar)을 한 글래스 카드에 묶어 세로 공간 절약.
 *   row1: stepper 항목 2개(좌) + 메타 셀렉터 3개(우)
 *   row2: progress bar 풀폭 가는 라인
 *   ≤900px: 메타 셀렉터가 다음 줄로 자연 wrap → 2행이 되지만 wrapper 1개라 시각 일관성 유지.
 * ────────────────────────────────────────────────────────────────────── */
.tutor-topbar {
  max-width: calc(var(--container) - 16px);
  /* 2026-05-14 — 5px 균등 간격(위/아래). 옛 margin: var(--space-4) auto 0(24/0) 비대칭 해결. */
  margin: 5px auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-5);
  row-gap: var(--space-2);
}
/* .container가 함께 부여하는 좌우 padding 8px을 topbar에는 무력화 — 정확한 폭 일치. */
.tutor-topbar.container { padding-left: var(--space-5); padding-right: var(--space-5); }

/* 내부 stepper — 기존 .stepper 스타일을 일부 override하여 padding 0(부모가 처리). */
.tutor-stepper {
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
  /* topbar 안에 들어가면서 자체 max-width/margin이 불필요 — wrapper가 처리. */
  max-width: none;
  margin: 0;
}
.tutor-topbar .stepper__list {
  /* topbar 안에선 list가 자체 폭만 차지 — meta-bar에 자리 양보. */
  display: inline-flex;
  gap: var(--space-4);
}
.tutor-topbar .stepper__item { font-size: var(--fz-13); }

/* 메타 셀렉터 — topbar 우측 끝으로 밀고, 셀렉터 3개를 inline-flex.
   base .tutor-meta-bar는 display:grid + grid-template-columns: repeat(3, 1fr)이라
   topbar 안에서도 자식 row가 100% width로 부풀어 세로 stack되는 사용자 보고.
   margin/padding/max-width 외에 grid-template-columns·background·border까지 모두 override. */
.tutor-topbar .tutor-meta-bar {
  margin: 0 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: 0;
  max-width: none;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.tutor-topbar .tutor-meta-bar .tutor-meta__row {
  display: inline-flex;
  align-items: center;
  width: auto;
  gap: 6px;
  grid-template-columns: none;  /* base grid 무력화 */
}
.tutor-topbar .tutor-meta-bar .tutor-meta__row .t-caption {
  font-size: var(--fz-11, 11px);
  letter-spacing: 0;
  white-space: nowrap;
}
.tutor-topbar .tutor-meta-bar .tutor-meta__select {
  width: auto;
  min-width: 0;
  padding: 6px 24px 6px 10px;
  font-size: var(--fz-13);
  max-width: 160px;
}
/* stepper label 컴팩트 — 1행 유지를 위해 폭 절감. 작은 화면에선 num만. */
.tutor-topbar .stepper__list { gap: var(--space-3); }
.tutor-topbar .stepper__label { font-size: var(--fz-13); }
@media (max-width: 1100px) {
  .tutor-topbar .stepper__label { display: none; }
}

/* progress bar — topbar 하단 풀폭 가는 라인(flex-basis:100%로 새 행). */
.tutor-topbar__bar {
  flex-basis: 100%;
  margin-top: 4px;
}

@media (max-width: 900px) {
  /* 좁은 화면에선 stepper와 meta가 한 행에 안 들어가니 메타가 다음 행으로 wrap.
     이때 메타는 좌측 정렬로 — margin-left:auto 해제. */
  .tutor-topbar .tutor-meta-bar {
    margin-left: 0;
    flex-basis: 100%;
  }
  /* 2026-05-14 v2 — 모바일에서 nav↔topbar 간격을 12px로 확보(이전 5px이 카드 그림자/blur로
     시각적 겹침 유발한다는 사용자 보고). topbar↔shell도 동일하게 12px 균등.
     좌우 여백은 화면 폭에 맞춰 8px(컴팩트). */
  .tutor-main { padding-top: 0; padding-bottom: var(--space-12); }
  .tutor-topbar { margin: 12px var(--space-2) 12px; padding: 10px var(--space-3); }
  .tutor-shell { margin: 0 var(--space-2) var(--space-8); }
}
@media (max-width: 600px) {
  /* 모바일(≤600px): 좌우 여백 더 컴팩트, 위/아래 간격은 12px 유지. */
  .tutor-topbar { margin: 12px 6px 12px; padding: 8px 10px; }
  .tutor-shell { margin: 0 6px var(--space-6); }
  /* 모바일: stepper 숫자 아이콘 블라인드 처리로 높이 확보 */
  .stepper__num { display: none; }
  /* 튜터 코치 카드 모바일 최적화 */
  .tutor-coach-card { padding: var(--space-3) var(--space-3); }
  .tutor-coach-card__tag { font-size: var(--fz-11); }
  .tutor-coach-card__source { font-size: var(--fz-12); }
  .tutor-coach-card__text { font-size: var(--fz-13); }

  /* 섹션 헤더 모바일 최적화 — 서론/본론/결론 3행 정렬 개선 */
  .tutor-section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .tutor-section__label { font-size: var(--fz-11); }
  .tutor-section__hint { font-size: var(--fz-11); }
  .tutor-section__count { margin-left: 0; font-size: var(--fz-11); }
  .tutor-section__auto { padding: 4px 8px; font-size: var(--fz-11); }
  .tutor-section__auto-status { font-size: var(--fz-10); }
}

/* 결과 화면 — result.html의 result-shell 패턴 차용. 1180+에서 좌(본문) + 우(메타 320px). */
.tutor-result {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-10);
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6);
}
@media (max-width: 980px) {
  .tutor-result { grid-template-columns: 1fr; }
}
.tutor-result__doc {
  padding: var(--space-8) var(--space-8);
  min-height: 320px;
}
@media (max-width: 720px) { .tutor-result__doc { padding: var(--space-5); } }

.tutor-result__meta {
  position: sticky; top: 90px;
  display: flex; flex-direction: column; gap: var(--space-4);
  align-self: start;
}
.tutor-result__card {
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.tutor-result__row {
  display: flex; justify-content: space-between; gap: var(--space-3);
  font-size: var(--fz-13);
}
.tutor-result__row .k { color: var(--ink-mute); }
.tutor-result__row .v { font-weight: 500; text-align: right; max-width: 60%; word-break: keep-all; }
.tutor-result__actions { display: flex; flex-direction: column; gap: 8px; }
.tutor-result__hint {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--fz-11, 11px);
  line-height: var(--lh-snug);
}

/* ──────────────────────────────────────────────────────────────────────
 * 2026-05-13 — 핵심 키워드 입력 (제목 input 아래).
 *   레이아웃: 라벨 + 카운터 / 입력창 / chip 리스트(자동 줄바꿈).
 *   chip 시각 자체는 05-guided.css의 .kchip 토큰 재사용 — 일관성 유지.
 * ────────────────────────────────────────────────────────────────────── */
.tutor-editor__keywords {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tutor-editor__kw-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-mute);
  font-size: var(--fz-12);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.tutor-editor__kw-tag {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(31,58,138,0.10);
  color: var(--accent);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
}
:root[data-theme="dark"] .tutor-editor__kw-tag {
  background: rgba(138,180,248,0.18);
}
.tutor-editor__kw-counter {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.tutor-editor__kw-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-glass-2);
  color: var(--ink);
  font-size: var(--fz-14);
  font-family: inherit;
  transition: border-color var(--dur-2), background var(--dur-2);
}
.tutor-editor__kw-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
.tutor-editor__kw-chips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}
.tutor-editor__kw-chips:empty { display: none; }

/* 단일 모드 — intro/conclusion section hide, body section의 head 정보 일부 hide. */
.tutor-main[data-editor-mode="single"] .tutor-section[data-section="intro"],
.tutor-main[data-editor-mode="single"] .tutor-section[data-section="conclusion"] {
  display: none;
}
/* 단일 모드의 body section: 라벨 "본문"으로 재해석 + 권장 비중 hide (한 묶음에 비중 무의미).
   .tutor-section__label은 그대로(서론/본론/결론) 두고, CSS::before로 단일 모드 라벨 override. */
.tutor-main[data-editor-mode="single"] .tutor-section[data-section="body"] .tutor-section__label {
  visibility: hidden;
  position: relative;
}
.tutor-main[data-editor-mode="single"] .tutor-section[data-section="body"] .tutor-section__label::after {
  content: "본문";
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
}
.tutor-main[data-editor-mode="single"] .tutor-section[data-section="body"] .tutor-section__hint {
  display: none;
}

/* 2026-05-14: mobile capture fix for topbar/editor bands. */
@media (max-width: 600px) {
  .tutor-topbar {
    row-gap: 10px;
  }

  .tutor-topbar .tutor-stepper {
    flex-basis: 100%;
  }

  .tutor-topbar .stepper__list {
    width: 100%;
    justify-content: space-between;
  }

  .tutor-topbar .tutor-meta-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  .tutor-topbar .tutor-meta-bar .tutor-meta__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    min-width: 0;
  }

  .tutor-topbar .tutor-meta-bar .tutor-meta__select {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 44px;
    padding: 7px 24px 7px 9px;
  }

  .tutor-pane,
  .tutor-pane--editor,
  .tutor-editor__head,
  .tutor-editor__body,
  .tutor-section,
  .tutor-section__editable,
  .tutor-editor__keywords,
  .tutor-editor__kw-input {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .tutor-editor__btns {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    overflow: visible;
  }

  .tutor-editor__btns > * {
    min-width: 0;
    flex: 0 1 auto;
  }

  .tutor-editor__spellcheck span[data-tutor-spellcheck-label],
  .tutor-editor__reset {
    white-space: nowrap;
  }

  .tutor-mode-pick {
    max-width: 100%;
  }

  .tutor-mode-pick__seg {
    min-width: 0;
  }

  .tutor-mode-pick__btn {
    white-space: nowrap;
  }

  .tutor-editor__btns .fpick--right {
    margin-left: 0;
  }
}

@media (max-width: 380px) {
  .tutor-topbar .tutor-meta-bar {
    gap: 6px;
  }

  .tutor-topbar .tutor-meta-bar .tutor-meta__row .t-caption {
    font-size: 10px;
  }

  .tutor-topbar .tutor-meta-bar .tutor-meta__select {
    font-size: var(--fz-12);
    padding-left: 7px;
  }
}

/* 2026-05-14: align the writing card width with the top meta/progress band. */
.tutor-shell.container {
  max-width: calc(var(--container) - 16px);
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 900px) {
  .tutor-shell.container {
    width: auto;
  }
}

/* ───── 2026-05-15 — 글쓰기 코칭 화면 정렬 재수립: 제목 우선 + 툴바 접이식 ─────
 * 사장님 결정: 제목 입력란이 [툴바] / [제목] / [핵심키워드] 사이에 묻혀 헷갈리던 문제 해결.
 * 마크업 순서는 그대로 두고(=ARIA tab order 보존), flex `order`로 시각 순서만 재배치한다.
 *   1) 제목 입력  (가장 위, 직관성 최우선)
 *   2) 핵심 키워드 (제목 보조)
 *   3) 편집 도구 (서체/모드/크기 등) — 모바일에서는 접이식 ⚙ 버튼으로 가림
 */
.tutor-editor__title { order: 1; }
.tutor-editor__keywords { order: 2; }
.tutor-editor__toolbar-toggle { order: 3; }
.tutor-editor__btns { order: 4; }

/* 토글 버튼 — 데스크탑에서는 숨기고, 툴바는 항상 노출. */
.tutor-editor__toolbar-toggle {
  display: none;
}

/* 모바일: 접이식 활성화. */
@media (max-width: 560px) {
  .tutor-editor__toolbar-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 8px 12px;
    background: var(--surface);
    color: var(--ink-mute);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--fz-13);
    cursor: pointer;
    transition: color var(--dur-2), border-color var(--dur-2);
  }
  .tutor-editor__toolbar-toggle:hover {
    color: var(--ink);
    border-color: var(--ink-faint);
  }
  .tutor-editor__toolbar-toggle-caret {
    transition: transform var(--dur-2) var(--easing-standard, ease);
  }
  .tutor-editor__toolbar-toggle[aria-expanded="false"] .tutor-editor__toolbar-toggle-caret {
    transform: rotate(-90deg);
  }
  /* 접힘 상태에서는 툴바 본체 가림. id 셀렉터로 호환성 보장 (sibling 거리 무관). */
  .tutor-editor__toolbar-toggle[aria-expanded="false"] ~ #tutor-editor-toolbar {
    display: none;
  }
}