/* 09-tutor-coach.css — 2026-05-12 분리: 09-tutor.css가 2938줄로 너무 커서 3개로 물리 분리.
 * 이 파일은 코칭 제안 패널 + 헤더 버튼 그룹 + 페이저 + 로딩 락 + 서체 셀렉터 모음.
 * cascade 순서: 09-tutor.css → 09-tutor-coach.css → 09-tutor-refine.css. HTML link 순서 동일 보장. */
/* ════════════════════════════════════════════════════════════════
 * [2026-05-08] 진단/코칭 버튼 + 코칭 패널 + 로딩 락 + 서체 셀렉터
 * ════════════════════════════════════════════════════════════════ */

/* ─── 에디터 헤더 버튼 그룹 (진단/코칭/맞춤법/리셋 + 우측에 서체) ─── */
.tutor-editor__btns {
  /* 2026-05-12: inline-flex → flex — 컨테이너가 부모 폭을 차지해야 마지막 자식 .fpick--right의
     margin-left:auto가 서체 버튼을 우측으로 밀어내는 우측 정렬이 작동. */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tutor-editor__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fz-13);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-2) var(--easing-standard),
              border-color var(--dur-2) var(--easing-standard),
              color var(--dur-2) var(--easing-standard),
              box-shadow var(--dur-2) var(--easing-standard),
              opacity var(--dur-2) var(--easing-standard);
}
.tutor-editor__action--diag {
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: var(--accent-on);
}
.tutor-editor__action--diag:hover:not(:disabled) {
  box-shadow: 0 8px 22px rgba(31,58,138,0.35);
}
.tutor-editor__action--coach {
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
}
.tutor-editor__action--coach:hover:not(:disabled) {
  background: rgba(31,58,138,0.08);
}
.tutor-editor__action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tutor-editor__action.is-busy {
  opacity: 0.7;
  pointer-events: none;
}
.tutor-editor__action-icon {
  font-size: 13px;
}

/* ─── 코칭 제안 패널 (우측 코치 컬럼 상단) ─── */
.tutor-coach-suggest {
  /* 2026-05-12: 외곽 라운딩 카드의 배경/그림자/블러 제거.
     v3: PAGE_SIZE=1로 패널이 컴팩트해졌으므로 max-height/overflow 제약 해제.
        — 패널이 자기 컨텐츠 크기에 맞게 자라되, 외곽 sticky pane이 viewport 관리. */
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  animation: tutor-sc-in var(--dur-3) var(--easing-emphasis);
  margin-bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 0 0 auto;
  min-height: 0;
}
/* [hidden] 우선순위 회복 — display:flex 명시 시 UA의 hidden(display:none)이 무력화되는 함정 차단. */
.tutor-coach-suggest[hidden] { display: none; }
.tutor-coach-suggest__head {
  display: grid;
  /* 2026-05-12: 토글 버튼 자리 추가 — [dot][title][meta-1fr][toggle][close] */
  grid-template-columns: 12px auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--line);
}
.tutor-coach-suggest__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(31,58,138,0.14);
}
.tutor-coach-suggest__title {
  margin: 0;
  font-size: var(--fz-14);
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: 0.02em;
}
.tutor-coach-suggest__meta {
  font-size: var(--fz-12);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.tutor-coach-suggest__close {
  border: 0;
  background: transparent;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--ink-mute);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-1) var(--easing-standard),
              background var(--dur-1) var(--easing-standard);
}
.tutor-coach-suggest__close:hover {
  color: var(--accent);
  background: rgba(31,58,138,0.08);
}
.tutor-coach-suggest__status {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(31,58,138,0.05);
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
  font-size: var(--fz-13);
  line-height: var(--lh-snug);
}
.tutor-coach-suggest__status[data-tone="ok"]      { border-left-color: var(--ok); color: var(--ok); background: rgba(30,122,90,0.08); }
.tutor-coach-suggest__status[data-tone="err"]     { border-left-color: var(--err); color: var(--err); background: rgba(182,48,63,0.08); }
.tutor-coach-suggest__status[data-tone="loading"] { color: var(--accent); }
.tutor-coach-suggest__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 0 0 auto;
  min-height: 0;
  /* 2026-05-12 v3: PAGE_SIZE=1로 카드 1장만 노출 → 스크롤 자체 발생 X.
     overflow:visible로 두어 잠재적 scrollbar 자취도 제거. */
  overflow: visible;
  padding-right: 0;
}

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

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

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

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

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

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

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

/* 2026-05-12: 전역 로딩 락(.g-loading-*, body[data-busy]) 규칙은
   07-misc.css 말미로 이전 — tutor-coach 기능과 무관한 g- 전역 유틸이라
   tutor-coach 미사용 페이지(guided/result/gallery 등)에서도 필요하기 때문. */

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

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

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

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

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

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

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