/* 과제 검토(오류 검수) 페이지 — 프로토타입 review.html 디자인 이식 (CSP 외부화).
   ipsiroad.css 뒤 로드. 페이지 고유 클래스만 정의(토큰·.btn·.card·헤더/푸터는 ipsiroad.css 제공). */

.tool-shell{max-width:1180px;margin:0 auto;padding:0 32px}
.tophero{padding:54px 0 8px}
.tophero .lead{max-width:62ch}

/* 진행 단계 표시(라이브 유지) */
.steps{display:flex;align-items:center;gap:10px;margin:26px auto 0;max-width:1180px;flex-wrap:wrap}
.steps .s{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--faint)}
.steps .s.active{color:var(--green)}
.steps .s .n{width:22px;height:22px;border-radius:50%;background:var(--sage);color:var(--green);display:grid;place-items:center;font-size:12px;font-weight:800}
.steps .sep{color:var(--faint)}

/* 입력 폼 단독(예시 미리보기 제거) — 가운데 정렬 단일 컬럼 */
.rev-grid{display:grid;grid-template-columns:minmax(0,1080px);justify-content:center;gap:26px;align-items:start;margin-top:30px}

/* 입력 폼 — 최상위 블록 간 일정한 세로 리듬(과거 .field+.field 가 행 안 두 번째 칸까지 밀어 삐뚤어지던 버그 수정) */
.rev-form > .field, .rev-form > .field-row, .rev-form > .ec-rubric-field{margin-top:16px}
.rev-form > *:first-child{margin-top:0}
.rev-form .field-row.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.rev-form .field{display:flex;flex-direction:column}
.rev-form .field label{font-size:14px;font-weight:800;color:var(--green);margin-bottom:7px}
.rev-form .field .req{color:var(--gold);margin-left:4px}
.rev-form .field .opt{font-size:12px;font-weight:700;color:var(--faint);margin-left:6px}
.rev-form .field input,.rev-form .field textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px 14px;font-size:15px;color:var(--ink);font-family:inherit}
.rev-form .field textarea{min-height:160px;resize:vertical}
.rev-form .field textarea.big{min-height:200px}
.rev-form .field input:focus,.rev-form .field textarea:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(43,63,50,.1)}
.rev-form .hint{font-size:12.5px;color:var(--faint);margin-top:6px;line-height:1.5}
.rev-form .hint b{color:var(--green);font-weight:800}
.rev-form .actions{display:flex;gap:12px;align-items:center;margin-top:22px;flex-wrap:wrap}
.rev-form .actions .ghost{margin-left:auto}
.rev-form .note{font-size:12.5px;color:var(--faint);line-height:1.55;margin:14px 0 0}

/* 드롭존 */
.ec-drop{display:block;border:2px dashed var(--beige);border-radius:14px;background:var(--mint);padding:26px 22px;text-align:center;cursor:pointer;transition:border-color .18s,background .18s}
.ec-drop:hover,.ec-drop:focus,.ec-drop.dragover{outline:0;border-color:var(--green);background:#fff}
.ec-drop.has-file{border-style:solid;border-color:var(--green);background:#fff}
.ec-drop-icon{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#fff;border:1px solid var(--line);color:var(--green);font-size:20px;margin-bottom:10px}
.ec-drop strong{display:block;font-size:14.5px;font-weight:800;color:var(--green);letter-spacing:-.01em}
.ec-drop-sub{display:block;font-size:12.5px;color:var(--soft);margin-top:5px}

.ec-or{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:var(--faint);font-size:12.5px;font-weight:700}
.ec-or::before,.ec-or::after{content:"";flex:1;height:1px;background:var(--line)}
.ec-charcount{text-align:right;font-size:12px;color:var(--faint);margin-top:6px}

.ec-formerror{margin:14px 0 0;font-size:13px;color:#B4502E;font-weight:700;line-height:1.55}

/* 결과 미리보기 사이드 */
.rev-aside .sub{margin:0 0 18px;font-size:14.5px;color:var(--soft);line-height:1.62}
.rev-aside .sub b{color:var(--green);font-weight:800}
.preview-tag{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--soft);background:#fff;border:1px solid var(--line);padding:7px 14px;border-radius:999px;margin-bottom:14px}
.preview-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}

.result-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:0 12px 28px rgba(43,63,50,.06)}
.result-card+.result-card{margin-top:14px}
.result-head{display:flex;align-items:flex-start;gap:14px}
.result-head .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.result-card .quote{margin:11px 0 0;padding:9px 13px;border-left:3px solid var(--beige);background:var(--cream-2);border-radius:0 8px 8px 0;font-size:13.5px;color:var(--ink);line-height:1.6}
.result-card .why{margin:11px 0 0;font-size:13.5px;color:var(--soft);line-height:1.62}
.result-card .fix{margin:8px 0 0;font-size:13.5px;color:var(--ink);line-height:1.62}
.result-card .why b,.result-card .fix b{color:var(--green);font-weight:800;margin-right:5px}
.result-card .meta-row{display:flex;align-items:center;gap:9px;margin-top:11px;font-size:11.5px;color:var(--faint);font-weight:600}
.result-card .meta-row .src{color:var(--green);font-weight:700}
.result-foot{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;font-size:13px;color:var(--faint);line-height:1.6}

/* findings 배지 (오류 / 검토 필요 / 수정 권장) */
.sev{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px}
.sev.err{color:#fff;background:#B4502E}
.sev.chk{color:var(--green);background:var(--beige)}
.sev.sug{color:var(--green);background:var(--sage)}
.etype{font-size:11px;font-weight:800;color:var(--brown);background:var(--cream-2);border:1px solid var(--line);border-radius:6px;padding:3px 9px}

/* 채점기준 예상 점수 (예정) */
.score-card{background:var(--green);border-color:var(--green)}
.score-card .result-head{align-items:center}
.score-card .kicker{color:#fff;font-size:12px;font-weight:800;letter-spacing:.02em}
.score-card .soonbadge{margin-left:auto;font-size:10.5px;font-weight:800;color:var(--green);background:var(--beige);border-radius:999px;padding:4px 10px}
.score-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:14px;color:rgba(255,255,255,.88);font-weight:600}
.score-row b{color:#fff;font-weight:800}
.score-total{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:12px;margin-top:4px;font-size:15px;font-weight:800;color:#fff}
.score-total b{color:var(--beige);font-size:18px}
.score-card .note{font-size:12px;color:rgba(255,255,255,.7);margin-top:12px;line-height:1.55}
.score-card.soon .score-row,.score-card.soon .score-total{opacity:.5}

/* 진행 카드 (라이브 #ec-progress-card 유지) */
.progress-card{margin-top:24px}
.progress-head{display:flex;justify-content:space-between;font-weight:800;color:var(--green)}
.progress-track{height:8px;background:var(--sage);border-radius:999px;margin:10px 0;overflow:hidden}
.progress-track span{display:block;height:100%;width:0;background:var(--green);border-radius:999px;transition:width .3s}
.progress-card p{color:var(--soft);font-size:13.5px;margin:0}
.progress-card.is-error .progress-track span{background:#B4502E}

/* 실제 결과 카드 (라이브 #ec-result-card → JS innerHTML 렌더) */
#ec-result-card{margin-top:24px}
.ec-result-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.ec-intro{font-size:16px;font-weight:800;color:var(--green);margin:0}
.ec-result-summary{display:flex;gap:8px;flex-wrap:wrap}
.ec-count{display:inline-flex;align-items:center;font-size:12.5px;font-weight:800;padding:6px 12px;border-radius:999px}
.ec-count.is-error{color:#fff;background:#B4502E}
.ec-count.is-review{color:var(--green);background:var(--beige)}
.ec-count.is-suggest{color:var(--green);background:var(--sage)}

.ec-empty{padding:20px;border:1px dashed var(--beige);border-radius:12px;background:var(--cream-2);color:var(--soft);font-size:14.5px;line-height:1.6}
.ec-error-note{padding:16px 18px;border:1px solid #E3C4B6;border-radius:12px;background:#FBF1EC;color:#B4502E;font-size:14px;font-weight:700;line-height:1.6}
.ec-refusal{padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--cream-2);color:var(--ink);font-size:14px;line-height:1.6}

.ec-table-wrap{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ec-table{width:100%;border-collapse:collapse;font-size:13.5px;color:var(--ink);table-layout:fixed}
.ec-table th:nth-child(1),.ec-table td:nth-child(1){width:14%}
.ec-table th:nth-child(2),.ec-table td:nth-child(2){width:8%}
.ec-table th:nth-child(3),.ec-table td:nth-child(3){width:19%}
.ec-table th:nth-child(4),.ec-table td:nth-child(4){width:24%}
.ec-table th:nth-child(5),.ec-table td:nth-child(5){width:21%}
.ec-table th:nth-child(6),.ec-table td:nth-child(6){width:14%}
.ec-table thead th{text-align:left;font-size:12px;font-weight:800;color:var(--brown);background:var(--cream-2);padding:11px 13px;border-bottom:1px solid var(--line)}
.ec-table td{padding:13px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6;word-break:break-word;overflow-wrap:anywhere}
.ec-table tbody tr:last-child td{border-bottom:0}
.ec-class-cell{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ec-class-top{display:inline-flex;align-items:center}
.ec-class-cell .ec-etype,.ec-class-cell .ec-verified{margin-left:0}
.ec-find-index{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--green);color:#fff;font-size:11px;font-weight:800;margin-right:7px}
.ec-badge{display:inline-flex;align-items:center;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px}
.ec-badge.is-error{color:#fff;background:#B4502E}
.ec-badge.is-review{color:var(--green);background:var(--beige)}
.ec-badge.is-suggest{color:var(--green);background:var(--sage)}
.ec-etype{display:inline-block;margin-left:6px;font-size:11px;font-weight:800;color:var(--brown);background:var(--cream-2);border:1px solid var(--line);border-radius:6px;padding:3px 9px}
.ec-verified{display:inline-block;margin-left:6px;font-size:11px;font-weight:800;color:var(--green);background:var(--sage);border-radius:6px;padding:3px 9px}
.ec-confidence{font-size:13.5px;font-weight:800;color:var(--green)}
.ec-quote{padding:8px 12px;border-left:3px solid var(--beige);background:var(--cream-2);border-radius:0 8px 8px 0;font-size:13px;color:var(--ink);line-height:1.6}
.ec-reason-text{font-size:13px;color:var(--soft);line-height:1.62}
.ec-revision-cell{position:relative}
.ec-revision-text{font-size:13px;color:var(--ink);line-height:1.62;margin-top:4px}
.ec-copy{font-size:11.5px;font-weight:700;color:var(--green);background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 11px;cursor:pointer;font-family:inherit}
.ec-copy:hover{border-color:var(--green)}
.ec-copy.is-copied{color:#fff;background:var(--green);border-color:var(--green)}
.ec-evidence-text{font-size:12.5px;color:var(--soft);line-height:1.6;margin-bottom:6px}
.ec-src{display:flex;flex-wrap:wrap;gap:6px}
.ec-chip{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;color:var(--green);background:var(--cream-2);border:1px solid var(--line);border-radius:999px;padding:4px 10px;text-decoration:none}
.ec-chip:hover{border-color:var(--green)}
.ec-table .muted{color:var(--faint)}
.ec-disclaimer{font-size:12px;color:var(--faint);line-height:1.6;margin:14px 0 0}

/* 학생용 결과 카드 — 긴 원문·이유·수정문을 6열 표에 압축하지 않는다. */
.public-error-checker-page .ec-findings{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.public-error-checker-page .ec-find{margin:0}
.public-error-checker-page .ec-status-note{font-size:12px;font-weight:700;color:var(--soft)}
.public-error-checker-page .ec-reason-heading{margin:0 0 8px;color:var(--green);font-size:15px;font-weight:850;line-height:1.45;word-break:keep-all}
.public-error-checker-page .ec-content{margin:0;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word}
.public-error-checker-page .ec-quote{margin:0;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word}
.public-error-checker-page .ec-disclaimer{margin:18px 0 0;padding:16px 18px;border:1px solid #e6d6b7;border-radius:12px;background:#fff9ec;color:var(--ink);font-size:13px;line-height:1.7}
.public-error-checker-page .ec-disclaimer strong{display:block;margin-bottom:6px;color:var(--green);font-size:14px;font-weight:850}
.public-error-checker-page .ec-disclaimer p{margin:0;color:var(--soft)}

@media(max-width:640px){
  .public-error-checker-page .ec-find .th{align-items:flex-start}
  .public-error-checker-page .ec-badge{white-space:normal;line-height:1.35}
  .public-error-checker-page .ec-status-note{width:100%;padding-left:28px}
  .public-error-checker-page .ec-find .tb{padding:15px 14px 17px}
  .public-error-checker-page .ec-disclaimer{padding:15px 14px}
}

/* 좁은 화면: 표를 행별 카드로 전환 — 가로 스크롤 없이 라벨+내용 세로 배치 */
@media (max-width:720px){
  .ec-table-wrap{overflow:visible;border:0;border-radius:0}
  .ec-table,.ec-table tbody,.ec-table tr,.ec-table td{display:block;width:100%}
  .ec-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ec-table th:nth-child(1),.ec-table td:nth-child(1),
  .ec-table th:nth-child(2),.ec-table td:nth-child(2),
  .ec-table th:nth-child(3),.ec-table td:nth-child(3),
  .ec-table th:nth-child(4),.ec-table td:nth-child(4),
  .ec-table th:nth-child(5),.ec-table td:nth-child(5),
  .ec-table th:nth-child(6),.ec-table td:nth-child(6){width:100%}
  .ec-table tr{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;background:#fff;overflow:hidden}
  .ec-table td{border-bottom:1px solid var(--line);padding:11px 14px}
  .ec-table tr td:last-child{border-bottom:0}
  .ec-table td::before{content:attr(data-label);display:block;font-size:11px;font-weight:800;color:var(--brown);margin-bottom:5px}
}

/* 채점 기준 입력 (기본 3개 + 추가/삭제) */
.ec-rubric-field .hint{margin-bottom:10px}
.ec-rubric-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.ec-rubric-row{display:grid;grid-template-columns:1fr 72px 36px;gap:8px;align-items:center}
.ec-rubric-row .ec-rub-name,.ec-rubric-row .ec-rub-score{border:1px solid var(--line);border-radius:9px;background:#fff;padding:9px 11px;font-size:13.5px;color:var(--ink);font-family:inherit}
.ec-rubric-row .ec-rub-score{text-align:center}
.ec-rubric-row .ec-rub-name:focus,.ec-rubric-row .ec-rub-score:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(43,63,50,.1)}
.ec-rub-del{width:36px;height:36px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--faint);font-size:14px;cursor:pointer;font-family:inherit;line-height:1}
.ec-rub-del:hover{border-color:#B4502E;color:#B4502E}
.ec-rubric-add{font-size:13px;padding:9px 15px}

/* 채점 기준 평가 결과 */
.ec-rubric-result{margin-top:18px;border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--cream-2)}
.ec-rubric-rh{font-size:14px;font-weight:800;color:var(--green);margin-bottom:6px}
.ec-rub-asses{padding:11px 0;border-bottom:1px solid var(--line)}
.ec-rub-asses:last-child{border-bottom:0}
.ec-rub-asses-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ec-rub-crit{font-size:13.5px;font-weight:800;color:var(--ink)}
.ec-rub-max{font-size:11.5px;font-weight:700;color:var(--faint)}
.ec-rub-verdict{font-size:11.5px;font-weight:800;padding:4px 11px;border-radius:999px;white-space:nowrap}
.ec-rub-verdict.rub-meet{color:#fff;background:var(--green)}
.ec-rub-verdict.rub-part{color:var(--green);background:var(--beige)}
.ec-rub-verdict.rub-lack{color:#fff;background:#B4502E}
.ec-rub-comment{margin:6px 0 0;font-size:13px;color:var(--soft);line-height:1.6}
/* 사이드 예시 카드의 verdict 색(딥그린 배경 위) */
.score-card .score-row b.rub-meet{color:var(--beige)}
.score-card .score-row b.rub-part{color:#fff}

.is-hidden{display:none}

@media(max-width:920px){
  .tool-shell{padding:0 22px}
  .tophero{padding:30px 0 4px}
  .tophero .lead{font-size:16px;line-height:1.55}
  .steps{margin-top:18px}
  .rev-grid{grid-template-columns:1fr}
  .rev-form .field-row.two{grid-template-columns:1fr}
  /* 실제 결과가 나오면 정적 예시 미리보기는 결과 위로 길게 깔리지 않게 접는다 */
  .rev-grid.has-result .rev-aside{display:none}
}