/* ============================================================
   InfraTree v2 — 문제 풀이 페이지 (page composition + SSR 호환)
   tokens.css + components.css 위에서 이 페이지 레이아웃과,
   서버가 주입하는 구(舊) 클래스 마크업을 v2 토큰으로 맞추는 호환 규칙.
   ============================================================ */

/* ── 페이지 레이아웃 ─────────────────────── */
.solve-page { padding-top: var(--it-sp-5); padding-bottom: var(--it-sp-7); }
.solve-back { display: inline-block; font-size: var(--it-fs-sm); color: var(--it-text-2); margin-bottom: var(--it-sp-4); }
.solve-back:hover { color: var(--it-accent-hover); }
.solve-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--it-sp-5); align-items: start; }
.solve-col { display: grid; gap: var(--it-sp-4); min-width: 0; }
.solve-side { position: sticky; top: calc(var(--it-nav-h) + var(--it-sp-4)); display: grid; gap: var(--it-sp-4); }
@media (max-width: 840px) {
  .solve-grid { grid-template-columns: 1fr; }
  .solve-side { position: static; }
}

.head-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.detail-header h1 { margin: 0; font-size: var(--it-fs-xl); font-weight: 600; }
.detail-header .detail-description { margin: 8px 0 0; color: var(--it-text-2); font-size: var(--it-fs-sm); max-width: var(--it-content-max); }
.it-meta-row { display: flex; flex-wrap: wrap; gap: 8px; }
.it-meta-row:empty { display: none; }

/* injected list content (goals / checklist) */
.it-list { margin: 0; padding-left: 20px; color: var(--it-text-body); font-size: var(--it-fs-md); line-height: var(--it-lh-body); }
.it-list li { margin: 4px 0; }

/* ── 내 풀이 composer ────────────────────── */
.solve-composer-head { display: flex; align-items: baseline; margin-bottom: 14px; }
.solve-save { margin-left: auto; font-size: var(--it-fs-xs); color: var(--it-muted); }
.solve-save[data-saving] { color: var(--it-st-doing); }
.solve-fields { display: grid; gap: var(--it-sp-4); }
.solve-note { margin: 0; font-size: var(--it-fs-xs); color: var(--it-muted); line-height: var(--it-lh); }
.warn { display: flex; gap: 10px; align-items: flex-start; background: var(--it-st-review-dim); border: 1px solid rgba(210,153,34,.4); border-radius: var(--it-radius-sm); padding: 10px 12px; font-size: var(--it-fs-sm); color: var(--it-text); }
.warn-dot { width: 8px; height: 8px; border-radius: var(--it-radius-pill); background: var(--it-st-review); flex-shrink: 0; margin-top: 5px; }
.solve-hint-used { font-size: var(--it-fs-xs); color: var(--it-muted); }
.solve-hints { display: grid; gap: var(--it-sp-2); }
.solve-hints:empty { display: none; }
.solve-hint-guest { font-size: var(--it-fs-sm); color: var(--it-muted); border: 1px dashed var(--it-border); border-radius: var(--it-radius-sm); padding: 10px 12px; }
.solve-hint-locked { display: flex; align-items: center; gap: var(--it-sp-3); border: 1px solid var(--it-border); border-radius: var(--it-radius-sm); padding: 8px 12px; }
.solve-hint-locked .it-hint-title { flex: 1; font-weight: 600; font-size: var(--it-fs-base); }

/* Pro 잠금 (해설 · 무료 사용자) */
.solve-pro-lock { border: 1px solid var(--it-pro-line, var(--it-border-2)); background: var(--it-code-bg); border-radius: var(--it-radius-sm); padding: var(--it-sp-4); }
.solve-pro-lock-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.solve-pro-badge { font-size: var(--it-fs-xs); font-weight: 700; color: var(--it-st-review); background: var(--it-st-review-dim); border-radius: var(--it-radius-pill); padding: 3px 10px; }
.solve-pro-lock p { margin: 0 0 12px; font-size: var(--it-fs-sm); color: var(--it-text-2); line-height: var(--it-lh); }

/* ── 제출 후 비교 ────────────────────────── */
#solve-submitted { display: grid; gap: var(--it-sp-4); }
.solve-submitted-head { display: flex; align-items: center; gap: 10px; }
.solve-muted { font-size: var(--it-fs-sm); color: var(--it-text-2); }
.solve-cmp-label { font-weight: 600; margin-bottom: 10px; }
.solve-cmp-mine { font-size: var(--it-fs-xs); color: var(--it-muted); margin-bottom: 4px; }
#solve-submitted .it-body { font-size: var(--it-fs-base); }

/* ── 다음 문제 ───────────────────────────── */
.solve-next-head { padding: var(--it-sp-4); border-bottom: 1px solid var(--it-border); font-size: var(--it-fs-lg); font-weight: 600; }

/* ============================================================
   SSR 주입 호환 — 서버가 공유 헬퍼(renderServerPills/Cards/ValueCards,
   renderServerFieldNotes)로 넣는 구 클래스를 v2 토큰으로 렌더.
   (공유 서버 헬퍼를 바꾸지 않고 이 페이지에서만 스타일 재정의)
   ============================================================ */
/* meta pills (renderServerPills → .problem-tag) */
.solve-page .problem-tag {
  display: inline-flex; align-items: center; min-height: 0;
  font-family: var(--it-mono); font-size: var(--it-fs-xs); font-weight: 500;
  color: var(--it-text-2); background: transparent;
  border: 1px solid var(--it-border-2); border-radius: var(--it-radius-pill);
  padding: 2px 9px;
}

/* related problems (renderServerProblemCards → .problem-card / .problem-grid) */
.solve-page .it-related .problem-grid,
.solve-page .it-related { display: block; }
.solve-page .problem-card {
  display: flex; align-items: center; gap: var(--it-sp-3);
  padding: 11px var(--it-sp-4); border: 0; border-bottom: 1px solid var(--it-border);
  border-radius: 0; background: transparent; box-shadow: none;
}
.solve-page .problem-card:last-child { border-bottom: 0; }
.solve-page .problem-card:hover { background: var(--it-panel-2); }
.solve-page .problem-card h3, .solve-page .problem-card .problem-card-title {
  font-size: var(--it-fs-base); font-weight: 500; color: var(--it-text); margin: 0;
}
.solve-page .problem-card p { font-size: var(--it-fs-sm); color: var(--it-muted); margin: 2px 0 0; }
.solve-page .problem-card a { color: inherit; }

/* FAQ (renderServerValueCards → .value-card) */
.solve-page .it-faq-list { display: grid; gap: var(--it-sp-3); }
.solve-page .value-card {
  background: var(--it-code-bg); border: 1px solid var(--it-border);
  border-radius: var(--it-radius-sm); padding: var(--it-sp-4); box-shadow: none;
}
.solve-page .value-card h3, .solve-page .value-card strong { font-size: var(--it-fs-base); color: var(--it-text); }
.solve-page .value-card p { font-size: var(--it-fs-sm); color: var(--it-text-body); margin: 6px 0 0; line-height: var(--it-lh); }

/* field notes (renderServerFieldNotes → .field-note-card) */
.solve-page .it-field-note-list { display: grid; gap: var(--it-sp-3); }
.solve-page .field-note-card {
  background: var(--it-code-bg); border: 1px solid var(--it-border);
  border-radius: var(--it-radius-sm); padding: var(--it-sp-4);
}
.solve-page .field-note-card-head { display: flex; gap: 8px; margin-bottom: 8px; }
.solve-page .field-note-card .status-pill {
  font-size: var(--it-fs-xs); color: var(--it-accent); background: var(--it-accent-dim);
  border-radius: var(--it-radius-pill); padding: 3px 10px;
}
.solve-page .field-note-card p { font-size: var(--it-fs-sm); color: var(--it-text-body); margin: 0; line-height: var(--it-lh); }

/* ── 객관식 보기 (solve.js · 서버가 보기 id·라벨만 심어준다) ── */
.solve-choices { display: grid; gap: var(--it-sp-2); }
.solve-choices .it-field-label { margin-bottom: 2px; }
.solve-choice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--it-panel-2);
  border: 1px solid var(--it-border-2);
  border-radius: var(--it-radius-sm);
  cursor: pointer;
}
.solve-choice:hover { border-color: var(--it-border-2); background: var(--it-panel); }
.solve-choice input { margin: 3px 0 0; accent-color: var(--it-accent); flex: none; }
.solve-choice-label { font-size: var(--it-fs-base); line-height: var(--it-lh); color: var(--it-text); }
.solve-choice.is-picked { border-color: var(--it-accent-line); background: var(--it-accent-dim); }

/* 제출 후 채점 표시 — 색만으로 구분하지 않고 라벨을 같이 준다 */
.solve-choice.is-reviewed { cursor: default; justify-content: space-between; align-items: center; }
.solve-choice.is-correct { border-color: var(--it-accent-line); background: var(--it-accent-dim); }
.solve-choice.is-wrong { border-color: rgba(248, 81, 73, 0.35); background: rgba(248, 81, 73, 0.1); }
.solve-choice-mark {
  flex: none; margin-left: 12px;
  font-size: var(--it-fs-xs); font-weight: 700; color: var(--it-text-2);
}
.solve-choice.is-correct .solve-choice-mark { color: var(--it-accent); }
.solve-choice.is-wrong .solve-choice-mark { color: var(--it-st-danger); }

.solve-actions { display: grid; gap: var(--it-sp-3); margin-top: var(--it-sp-4); }