/* ==========================================================================
   corrector / style.css
   이 도구에만 필요한 스타일입니다. 색·간격은 css/common.css 의 변수만 씁니다.
   🔴 인라인 style 이 CSP 로 막히므로 상태는 전부 data-* 속성으로 받습니다.
   ========================================================================== */

.source-area {
  min-height: 200px;
  font-size: 15px;
  line-height: 1.7;
  resize: vertical;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.toolbar .button {
  min-height: 44px; /* STYLE.md: 터치 대상 최소 44px */
}

.form-actions--wrap {
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.form-actions--wrap .button {
  flex: 1 1 200px;
}


/* --- 갈래별 개수 ---------------------------------------------------------- */

.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.category {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  font-size: 13px;
}

.category__name {
  font-weight: var(--weight-bold);
}

.category__count {
  color: var(--color-text-muted);
}

/* --- 표시된 원문 ---------------------------------------------------------- */

.block-title {
  margin-bottom: var(--space-1);
  font-size: 17px;
}

.block-hint {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: 14px;
}

.review-text {
  overflow-wrap: anywhere;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  font-size: 16px;
  line-height: 2;
  white-space: pre-wrap;
}

.hit {
  padding: 2px 3px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.hit::after {
  display: inline-block;
  margin-left: 2px;
  content: attr(data-no);
  font-size: 11px;
  font-weight: var(--weight-bold);
  vertical-align: super;
}

.hit[data-severity="error"] {
  border-bottom: 2px solid var(--color-danger);
}

.hit[data-severity="error"]::after {
  color: var(--color-danger);
}

.hit[data-severity="warn"] {
  border-bottom: 2px solid var(--color-warning);
}

.hit[data-severity="warn"]::after {
  color: var(--color-warning);
}

.hit[data-severity="info"] {
  border-bottom: 2px dashed var(--color-text-muted);
}

.hit[data-severity="info"]::after {
  color: var(--color-text-muted);
}

.result-panel[data-clean="yes"] .result-summary {
  color: var(--color-success);
  font-weight: var(--weight-bold);
}

/* --- 설명 카드 ------------------------------------------------------------ */

.issue-list {
  display: grid;
  gap: var(--space-3);
}

.issue {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.issue[data-severity="error"] {
  border-left-color: var(--color-danger);
}

.issue[data-severity="warn"] {
  border-left-color: var(--color-warning);
}

.issue[data-severity="info"] {
  border-left-color: var(--color-text-muted);
}

.issue[data-active] {
  border-color: var(--color-primary);
  background: var(--color-surface-soft);
}

.issue__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.issue__no {
  display: grid;
  width: 26px;
  height: 26px;
  flex: none;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: var(--weight-bold);
}

.issue__cat {
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: var(--weight-bold);
}

.issue__title {
  margin: 0;
  font-size: 15px;
  font-weight: var(--weight-bold);
}

.issue__diff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.issue__before,
.issue__after {
  overflow-wrap: anywhere;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 15px;
}

.issue__before {
  background: var(--color-surface-soft);
  color: var(--color-danger);
  text-decoration: line-through;
}

.issue__after {
  background: var(--color-surface-soft);
  color: var(--color-success);
  font-weight: var(--weight-bold);
}

.issue__arrow {
  color: var(--color-text-muted);
  font-weight: var(--weight-bold);
}

.issue__message {
  margin-bottom: 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

.issue__example {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
  font-style: italic;
}

.issue__actions {
  margin-top: var(--space-3);
}

.issue__actions .button {
  min-height: 44px; /* STYLE.md: 터치 대상 최소 44px */
  font-size: 14px;
}

/* --- 안내 ---------------------------------------------------------------- */

.notice--warn {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-warning);
}

.notice--warn strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-warning);
}

/* --- 검사 항목 목록 ------------------------------------------------------- */

.rule-guide {
  margin-top: var(--space-4);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.rule-guide summary {
  display: flex;
  min-height: 52px; /* STYLE.md: 터치 대상 최소 44px */
  align-items: center;
  font-weight: var(--weight-bold);
}

.rule-guide__body {
  padding-bottom: var(--space-4);
}

.rule-group {
  margin-top: var(--space-4);
}

.rule-group__name {
  margin-bottom: var(--space-1);
  font-size: 14px;
  font-weight: var(--weight-bold);
}

.rule-group__items {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--color-text-muted);
  font-size: 14px;
}

/* --- 2단계 AI (준비 중) ---------------------------------------------------- */

.ai-stub {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.ai-stub__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.ai-stub__head h3 {
  margin: 0;
  font-size: 17px;
}

.ai-stub p {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: 14px;
}

.ai-stub .button[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

.ai-stub .field-hint {
  margin-top: var(--space-3);
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .form-actions--wrap {
    flex-direction: column;
  }

  .review-text {
    font-size: 15px;
  }

  .issue__actions .button {
    width: 100%;
  }
}