/* ================= 해설지 디자인 (학생·선생님 화면 공통) =================
   8px 격자 · 글 16px/1.85 · 단계 카드는 왼쪽 레일로 이어짐 · 수식은 옅은 판 위에 · 그림은 눌러서 크게 */
.sx { --sx-ink: #182033; --sx-sub: #5b6784; --sx-line: #e6ebf5; --sx-soft: #f6f8fd; --sx-brand: #1b3fc4; --sx-violet: #7a3cff; }

/* 머리 */
.sx-head { padding: 2px 2px 14px; border-bottom: 1px solid var(--sx-line); margin-bottom: 14px; }
.sx-kind { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .2px; color: var(--sx-brand); background: #eaf0ff; border-radius: 999px; padding: 4px 10px; margin-bottom: 10px; }
.sx.ai .sx-kind { color: #6a2fe0; background: #f1eaff; }
.sx-book { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.sx-book b { font-size: 17px; font-weight: 900; color: var(--sx-ink); letter-spacing: -.3px; }
.sx-book em { font-style: normal; font-size: 15px; font-weight: 900; color: #fff; background: var(--sx-brand); border-radius: 8px; padding: 2px 9px; }
.sx-unit { margin-top: 6px; font-size: 14.5px; font-weight: 700; color: var(--sx-sub); }
.sx-unit::before { content: "#"; color: #9aa6c4; margin-right: 3px; }
.sx-alias { margin-top: 6px; font-size: 12px; color: #98a2b3; line-height: 1.5; }

/* 정답 */
.sol-answer.sx-ans { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; margin: 0 0 18px;
  background: linear-gradient(135deg, #1f4fe0 0%, #1b3fc4 55%, #16309c 100%); color: #fff; box-shadow: 0 10px 22px -14px rgba(27,63,196,.9); }
.sol-answer.sx-ans > span:first-child { flex: none; font-size: 12.5px; font-weight: 800; opacity: 1; margin: 0; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.18); letter-spacing: .5px; }
.sol-answer.sx-ans > strong { flex: 1; min-width: 0; font-size: 21px; font-weight: 900; line-height: 1.45; letter-spacing: -.2px; overflow-x: auto; }
.sol-answer.sx-ans .katex { font-size: 1.02em; }

/* 구역 제목 */
.sx-sec { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.sx-sec span { font-size: 13px; font-weight: 900; color: var(--sx-sub); letter-spacing: 1px; }
.sx-sec::after { content: ""; flex: 1; height: 1px; background: var(--sx-line); }

/* 단계 카드: 왼쪽 레일로 이어진다 */
.sx .xsteps { position: relative; gap: 12px; }
.sx .xsteps::before { content: ""; position: absolute; left: 22px; top: 18px; bottom: 22px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #c9d6ff 0%, #dccbff 60%, #ffd98a 100%); }
.sx .xs { position: relative; display: block; padding: 14px 16px 15px 50px; border-radius: 16px; background: #fff; border: 1px solid var(--sx-line);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px -12px rgba(27,63,196,.25); }
.sx .xs-n { position: absolute; left: 10px; top: 13px; width: 26px; height: 26px; font-size: 13px; border: 3px solid #fff; box-sizing: content-box; }
.sx .xs-b { font-size: 16px; line-height: 1.85; color: var(--sx-ink); word-break: keep-all; overflow-wrap: anywhere; }
.sx .xs-b .katex { font-size: 1.06em; }
.sx .xs-b .katex-display { margin: 10px 0; padding: 10px 12px; background: var(--sx-soft); border-radius: 12px; border: 1px solid #edf1fa; }
.sx .xs-t { font-size: 15px; font-weight: 900; color: var(--sx-brand); margin-bottom: 4px; }
.sx .xs .efig { display: block; max-width: 100%; max-height: 62vh; object-fit: contain; margin: 12px auto 4px; padding: 6px; background: #fff;
  border: 1px solid #edf1fa; border-radius: 12px; cursor: zoom-in; }
.sx .xs-final { background: linear-gradient(135deg, #fffaf0 0%, #fff2d9 100%); border-color: #f6d58a; box-shadow: 0 8px 18px -14px rgba(240,140,0,.6); }
.sx .xs-final .xs-b { font-weight: 700; }
.xs-tag { display: inline-block; font-size: 11.5px; font-weight: 900; color: #b54708; background: #ffe7b8; border-radius: 6px; padding: 1px 7px; margin-bottom: 4px; letter-spacing: .5px; }

/* 한 덩어리 해설(카드로 안 나뉜 것) */
.sx .bank-expl > br:first-child { display: none; }
.sx .bank-expl { font-size: 16px; line-height: 1.85; color: var(--sx-ink); }
.sx .bank-expl > .efig { cursor: zoom-in; }

/* AI 풀이도 같은 모양 */
.sx.ai .sol-concept { background: #f4f0ff; border: 1px solid #e6dcff; border-radius: 14px; padding: 12px 14px; margin: 0 0 16px; }
.sx.ai .sol-concept b { color: #6a2fe0; font-size: 12.5px; letter-spacing: .5px; }
.sx.ai .sol-concept > div { margin-top: 4px; font-size: 15.5px; line-height: 1.8; }
.sx.ai .sol-problem { margin: 0 0 14px; }
.sx.ai .sol-steps { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0 0 18px; }
.sx.ai .sol-steps::before { content: ""; position: absolute; left: 22px; top: 18px; bottom: 22px; width: 2px; background: linear-gradient(180deg, #dccbff, #c9d6ff); }
.sx.ai .sol-steps li { position: relative; margin: 0; padding: 14px 16px 15px 50px; border: 1px solid var(--sx-line); border-left: 1px solid var(--sx-line); border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px -12px rgba(122,60,255,.25); }
.sx.ai .sol-steps li::before { left: 10px; top: 13px; width: 26px; height: 26px; line-height: 26px; font-size: 13px; border: 3px solid #fff; box-sizing: content-box;
  background: linear-gradient(135deg, #b18cff, #7a3cff); color: #fff; }
.sx.ai .step-title { font-size: 15px; font-weight: 900; color: #6a2fe0; margin-bottom: 4px; }
.sx.ai .step-body { font-size: 16px; line-height: 1.85; color: var(--sx-ink); word-break: keep-all; }
.sx.ai .step-body .katex-display { margin: 10px 0; padding: 10px 12px; background: var(--sx-soft); border-radius: 12px; }
.sx.ai .sol-warn, .sx.ai .sol-check { border-radius: 14px; padding: 12px 14px; font-size: 15px; line-height: 1.75; }

/* 찍은 사진 + 그림 크게 보기 */
#current > .card > .photo { max-height: 46vh; object-fit: contain; cursor: zoom-in; background: #f4f6fb; }
.zoom-back { position: fixed; inset: 0; z-index: 90; background: rgba(8, 14, 32, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; animation: zIn .18s ease; }
.zoom-back img { max-width: 100%; max-height: 82vh; object-fit: contain; background: #fff; border-radius: 12px; touch-action: pinch-zoom; }
.zoom-back button { margin-top: 14px; background: #fff; color: #182033; border: 0; border-radius: 999px; padding: 10px 26px; font-weight: 800; font-size: 15px; }
@keyframes zIn { from { opacity: 0; } to { opacity: 1; } }

/* 겉 카드 여백: 안쪽 카드와 겹쳐 글이 좁아지지 않게 */
body.m #current > .card { padding: 14px 12px 16px; }
body.m #current .hint-top { margin-bottom: 14px; }
@media (min-width: 560px) { body.m #current > .card { padding: 20px; } .sx .xs { padding-left: 56px; } }

/* 쌍둥이 문제 안 해설도 같은 모양(작게) */
.twin .xs { padding: 12px 12px 12px 46px; }
.twin .xs-b { font-size: 15px; }

.xs-tag { display: table; margin-bottom: 6px; }
.sol-answer.sx-ans > strong { font-size: 22px; }

/* 좁은 화면: 수식 판·카드 여백을 조금 줄여 긴 식이 들어갈 자리 확보 */
@media (max-width: 420px) {
  .sx .xs { padding-right: 12px; padding-left: 46px; }
  .sx .xs-n { left: 8px; }
  .sx .xsteps::before { left: 20px; }
  .sx .xs-b .katex-display { padding: 8px 6px; margin: 8px -4px; }
}