/* QURI 카드: 설명·증명·유도·예제·연습·실습 카드 (CARDS.md). 탐구 카드는 tb.css의 .card-body를 그대로 쓴다 */

.q-card .card-head .kind::before { content: attr(data-k); }
.q-card[data-kind] .card-head h2 { flex: 1 1 18em; }
.q-badge { display: inline-block; margin-right: 8px; padding: 1px 7px; font-family: var(--f-mono); font-size: 11px; font-weight: 500; color: var(--on-accent); background: var(--forest); border-radius: 2px; vertical-align: 3px; }
.q-card[data-kind="증명"] .q-badge, .q-card[data-kind="유도"] .q-badge { background: #6b5bc4; }
.q-card[data-kind="예제"] .q-badge, .q-card[data-kind="연습"] .q-badge { background: #b07a10; }
.q-card[data-kind="탐구"] .q-badge { background: #2f9a8f; }
.q-card[data-kind="실습"] .q-badge { background: var(--ink-2); }
.q-stds { padding: 8px 22px; border-bottom: 1px solid var(--rule); font-size: 12px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.q-stds a { color: var(--ink-2); text-decoration: none; border-bottom: 1px dotted var(--ink-3); }

.q-body { padding: 22px clamp(18px, 3vw, 34px) 26px; display: grid; gap: 22px; font-size: 15.5px; line-height: 1.75; }
.q-body p + p { margin-top: .6em; }
.q-body p.q-term + p.q-term { margin-top: .35em; }
.q-body p.q-term > b:first-child { margin-right: 2px; }
.q-sec > h3 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: var(--forest); }
.q-sec > h3::before { content: ""; flex: none; width: 14px; height: 2px; background: currentColor; transform: translateY(-4px); }
.q-sec ul, .q-sec ol:not(.q-proof):not(.q-read) { padding-left: 1.3em; }
.q-sec ul { list-style: disc; }
.q-sec ol:not(.q-proof):not(.q-read) { list-style: decimal; }
.q-sec li + li { margin-top: 4px; }
.q-sec.warn { padding: 12px 16px; background: var(--warn-bg);  }
.q-sec.warn > h3 { color: var(--warn); }
.katex-display { margin: .7em 0; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }

/* 정의·정리 상자 */
.q-def, .q-thm { position: relative; padding: 14px 18px 14px; background: var(--right-bg);  }
.q-thm { background: var(--card); border: 1px solid var(--ink);  }
.q-def > .lb, .q-thm > .lb { display: block; margin-bottom: 4px; font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }

/* 정의를 풀어 읽기: 구절 → 뜻 */
.q-read { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.q-read > li { display: grid; grid-template-columns: minmax(8em, 15em) 1fr; gap: 4px 18px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.q-read > li > b { font-weight: 600; color: var(--ink); }
@media (max-width: 640px) { .q-read > li { grid-template-columns: 1fr; } }

/* 증명·유도·풀이 단계 */
.q-proof { counter-reset: qs; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.q-proof > li { counter-increment: qs; display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.q-proof > li::before { content: counter(qs); grid-row: 1 / span 3; font-family: var(--f-mono); font-size: 12px; color: #6b5bc4; padding-top: 3px; }
.q-proof > li > * { grid-column: 2; }
.q-why { display: block; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.q-why::before { content: "근거"; margin-right: 8px; font-family: var(--f-kr); font-weight: 700; font-size: 11.5px; color: #6b5bc4; }
.q-proof > li.q-end::after { content: "∎"; grid-column: 2; justify-self: end; font-size: 18px; line-height: 1; color: var(--qed, #f2b33d); }
[data-theme="dark"] .q-proof > li::before, [data-theme="dark"] .q-why::before { color: #a397ec; }
[data-theme="dark"] .q-thm { }

/* 문제·검산 */
.q-prob { padding: 12px 16px; background: var(--paper-2); border: 1px solid var(--rule); }
.q-check { padding: 12px 16px; border: 1px dashed var(--forest); }
.q-check > h3 { margin-bottom: 4px; }

/* 접는 내용 (힌트, 풀이, 더 알기) */
.q-body details { border: 1px solid var(--rule); background: var(--card); }
.q-body details + details { margin-top: 6px; }
.q-body details > summary { cursor: pointer; padding: 7px 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); list-style: none; }
.q-body details > summary::-webkit-details-marker { display: none; }
.q-body details > summary::before { content: "+"; display: inline-block; width: 1em; font-family: var(--f-mono); color: var(--forest); }
.q-body details[open] > summary::before { content: "−"; }
.q-body details > :not(summary) { padding: 0 14px 12px; }
.q-body details.q-sol > summary { color: var(--forest); }

/* 연습 문제 목록 */
.q-exlist { counter-reset: qe; display: grid; gap: 18px; }
.q-exlist > li { counter-increment: qe; display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--ink); }
.q-exlist > li > .q-prob { position: relative; padding-left: 46px; }
.q-exlist > li > .q-prob::before { content: "문제 " counter(qe); position: absolute; left: 12px; top: 13px; width: 30px; font-family: var(--f-kr); font-weight: 700; font-size: 11.5px; line-height: 1.3; color: #b07a10; }

/* 코드 */
.q-body pre { overflow-x: auto; padding: 12px 14px; background: var(--night); color: var(--on-night); font-family: var(--f-mono); font-size: 13px; line-height: 1.55; }

/* ───── 단원 페이지 ───── */
.u-hero .meta .mono { color: var(--ink-3); }
.u-hero .meta a { color: var(--ink-2); }
.u-els { margin-top: 18px; max-width: 46em; font-size: 14px; color: var(--ink-2); }
.u-els b { font-weight: 600; color: var(--ink); margin-right: 6px; }
.q-checklist { margin: 28px 0 8px; border: 1px solid var(--ink); background: var(--card); }
.q-checklist > h2 { display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--ink); font-size: 14px; }
.q-checklist > h2 .mono { color: var(--forest); font-weight: 500; }
.q-checklist ol { display: grid; }
.q-checklist li { display: grid; grid-template-columns: 26px 72px 1fr auto; gap: 8px; align-items: baseline; padding: 9px 16px; border-bottom: 1px solid var(--rule); font-size: 14.5px; line-height: 1.5; }
.q-checklist li:last-child { border-bottom: 0; }
.q-checklist input { width: 16px; height: 16px; accent-color: var(--forest); transform: translateY(2px); }
.q-checklist .code { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.q-checklist .cards { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.q-checklist .cards a { color: var(--forest); text-decoration: none; margin-left: 4px; }
.q-checklist li.done .t { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--rule); }
.q-checklist .note { padding: 8px 16px; font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--rule); }
@media (max-width: 640px) {
  .q-checklist li { grid-template-columns: 24px 1fr; }
  .q-checklist .code, .q-checklist .cards { grid-column: 2; }
}
.u-empty { padding: 28px 22px; border: 1px dashed var(--rule); color: var(--ink-3); font-size: 14.5px; }
.u-pager { display: flex; justify-content: space-between; gap: 12px; padding: 24px 0 8px; border-top: 1px solid var(--rule); margin-top: 12px; font-size: 14px; }
.u-pager a { text-decoration: none; color: var(--ink-2); }
.u-pager a:hover { color: var(--forest); }

/* 과목 목차(책 목차형): 왼쪽 과목 정보는 고정, 오른쪽에 대단원 → 절 → 카드 */
.cx { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; padding: clamp(32px, 5vw, 60px) 0 24px; }
.cx-side { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; padding-right: 4px; }
.cx-side .meta { font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px; }
.cx-side h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.04em; line-height: 1.2; margin: 8px 0 10px; white-space: nowrap; }   /* 긴 과목명은 js/place.js fitTitle()이 글자를 줄여 한 줄에 맞춘다 */
.cx-lead { color: var(--ink-2); font-size: 14px; line-height: 1.65; margin-bottom: 10px; }
.cx-side .c-prog { margin: 14px 0 12px; }
.cx-side .c-prog .lp-bar { display: block; width: 100%; height: 6px; margin: 0 0 6px; border-radius: 2px; overflow: hidden; }
.cx-go { display: block; background: var(--forest); color: var(--on-accent); border-radius: 2px; padding: 10px 14px; font-weight: 700; font-size: 14px; text-decoration: none; line-height: 1.45; }
.cx-go:hover { filter: brightness(1.08); }
/* 시험 연습(문제은행) 링크: 주 단추 아래 테두리 단추 */
.cx-exam { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 8px; padding: 9px 14px; border: 1px solid var(--forest); border-radius: 2px; color: var(--forest); text-decoration: none; font-size: 14px; line-height: 1.45; }
.cx-exam .mono { font-size: 11.5px; color: var(--ink-2); }
.cx-exam:hover { background: var(--right-bg); }
.cx-exam.is-off { border-color: var(--rule); color: var(--ink-3); }
.cx-exam.is-off .mono { color: var(--ink-3); }
.cx-info { display: grid; gap: 8px; margin: 18px 0 0; font-size: 13px; line-height: 1.55; }
.cx-info div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
.cx-info dt { color: var(--ink-3); }
.cx-info dd { margin: 0; }
.cx-path { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); display: grid; gap: 8px; line-height: 1.55; }
.cx-path p { margin: 0; }
.cx-path .dim { display: block; font-size: 12px; }
.cx-ch { margin-bottom: 40px; }
.cx-ch-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
.cx-no { font-size: 28px; font-weight: 800; color: var(--forest); min-width: 1.4em; line-height: 1; }
.cx-ch-head h2 { font-size: clamp(19px, 2vw, 23px); letter-spacing: -.025em; margin: 0; }
.cx-ch-head h2 a { text-decoration: none; }
.cx-ch-head h2 a:hover { color: var(--forest); }
.cx-meta { margin-left: auto; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.cx-goal { color: var(--ink-2); font-size: 13.5px; margin: 8px 0 2px; }
.cx-sec { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 2px 12px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.cx-n { color: var(--ink-3); font-size: 13px; padding-top: 2px; }
.cx-sec.done .cx-n { color: var(--forest); }
.cx-t b { font-size: 15.5px; letter-spacing: -.015em; line-height: 1.5; }
.cx-t a { text-decoration: none; }
.cx-t a:hover { color: var(--forest); text-decoration: underline; }
.cx-code { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.cx-badge { font-size: 12px; color: var(--ink-3); white-space: nowrap; padding-top: 3px; }
.cx-badge.ok { color: var(--forest); font-weight: 700; }
.cx-qs { grid-column: 2 / 4; display: grid; gap: 1px; margin-top: 6px; }
.cx-qs a { display: block; position: relative; padding: 3px 0 3px 15px; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-decoration: none; }
.cx-qs a::before { content: ""; position: absolute; left: 2px; top: .8em; width: 5px; height: 5px; border-radius: 50%; background: var(--leaf); }
.cx-qs a:hover { color: var(--ink); text-decoration: underline; }
.cx-qs li.done a { color: var(--ink-3); }
.cx-qs li.done a::before { background: var(--forest); box-shadow: 0 0 0 2px var(--right-bg); }
.cx-k { font-size: 11px; color: var(--forest); margin-right: 6px; }
@media (max-width: 860px) {
  .cx { grid-template-columns: 1fr; gap: 28px; }
  .cx-side { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 480px) {
  .cx-sec { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 2px 8px; }
  .cx-no { font-size: 22px; }
}
.lp-bar { display: inline-block; width: 60px; height: 4px; margin-right: 6px; background: var(--rule); vertical-align: middle; }
.lp-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--forest); }

/* ───── 절 구조와 학습 기록 ───── */
.sec-no { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--forest); }
.q-one li { grid-template-columns: 26px 1fr; }
.q-checklist .t a { color: inherit; text-decoration: none; }
.q-checklist .t a:hover { color: var(--forest); }

/* 카드 아래 "끝까지 공부했어요" */
.q-seen { display: flex; justify-content: flex-end; padding: 10px clamp(18px, 3vw, 34px) 14px; border-top: 1px solid var(--rule); }
.q-seen-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; cursor: pointer; }
.q-seen-btn:hover { border-color: var(--forest); color: var(--ink); }
.q-seen-btn .box { width: 15px; height: 15px; border: 1.5px solid var(--ink-3); border-radius: 2px; position: relative; }
.q-seen-btn[aria-pressed="true"] { color: var(--forest); border-color: var(--forest); background: var(--right-bg); }
.q-seen-btn[aria-pressed="true"] .box { border-color: var(--forest); background: var(--forest); }
.q-seen-btn[aria-pressed="true"] .box::after { content: ""; position: absolute; left: 4px; top: 0; width: 4px; height: 8px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.q-card.is-seen > .card-head :is(.no:not(:empty), h2 > .q-badge)::after { content: " ✓"; }
.q-card.is-seen > .card-head .no::after { color: var(--forest); }
.toc li a.seen .mono::after { content: " ✓"; color: var(--forest); }

/* 대단원 페이지: 절 목록 */
.s-list { margin-top: 26px; border-top: 2px solid var(--ink); }
.s-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.s-row .n { color: var(--forest); font-size: 13px; }
.s-row > a { text-decoration: none; font-size: 17px; letter-spacing: -.02em; }
.s-row > a:hover b { color: var(--forest); }
.s-row .s-meta { display: flex; gap: 8px; align-items: baseline; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.s-row .s-std { grid-column: 2 / -1; color: var(--ink-3); }
.s-row.done .n::after, .cx-sec.done > .cx-n::after { content: " ✓"; color: var(--forest); }
.u-prog { margin-top: 14px; color: var(--ink-2); }
@media (max-width: 640px) { .s-row { grid-template-columns: 44px 1fr; } .s-row .s-meta { grid-column: 2; } }

.c-prog { margin-top: 16px; color: var(--ink-2); }

/* 메인: 이어서 공부하기 */
.q-resume { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 0 14px; align-items: baseline; margin: 0 0 22px; padding: 12px 18px; border: 1px solid var(--forest); background: var(--right-bg); text-decoration: none; color: var(--ink); }
.q-resume .mono { grid-row: 1 / span 2; font-size: 11.5px; color: var(--forest); }
.q-resume b { font-size: 16px; letter-spacing: -.02em; }
.q-resume .small { grid-column: 2; }
.q-resume .go { grid-row: 1 / span 2; grid-column: 3; font-size: 20px; color: var(--forest); }
.q-resume:hover b { text-decoration: underline; }
.u-stds > li.done .t { color: var(--ink-3); }
.u-stds > li a.t { display: block; text-decoration: none; color: inherit; padding: 0; min-width: 0; }
.u-stds > li a.t .small { margin-left: 4px; white-space: nowrap; }
.u-stds > li a.t:hover { color: var(--forest); }

/* 학습 기록 페이지 */
.r-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 22px; border: 1px solid var(--ink); background: var(--card); }
.r-stats > div { padding: 12px 16px; border-right: 1px solid var(--rule); }
.r-stats dt { font-size: 12px; color: var(--ink-3); }
.r-stats dd b { font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.r-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.r-tools .r-import { cursor: pointer; }
.r-tools .r-reset:hover { border-color: var(--warn); color: var(--warn); }
.r-sec { padding: 30px 0 10px; }
.r-sec > h2 { font-size: 20px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 10px; }
.r-visits li a { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--rule); text-decoration: none; }
.r-visits li a:hover .t { color: var(--forest); }
.r-courses { display: grid; gap: 0; margin-top: 8px; }
.r-course { display: grid; grid-template-columns: 260px 1fr; gap: 6px 28px; padding: 18px 0; border-top: 1px solid var(--rule); }
.r-course h3 { font-size: 18px; letter-spacing: -.02em; }
.r-course h3 a { text-decoration: none; }
.r-units li a { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 13.5px; color: var(--ink-2); }
.r-units li.done .t { color: var(--forest); }
@media (max-width: 720px) { .r-course { grid-template-columns: 1fr; } }
button.link { font: inherit; font-size: inherit; background: none; border: 0; padding: 0; color: var(--forest); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.q-table-wrap, .q-body table.q-table { display: block; overflow-x: auto; }
.q-body table.q-table { border-collapse: collapse; font-size: 13px; margin: 6px 0; max-width: 100%; }
.q-table th, .q-table td { border: 1px solid var(--rule); padding: 6px 9px; text-align: center; white-space: nowrap; }
.q-table thead th { background: var(--card); font-weight: 600; }
.q-table td:first-child { font-weight: 600; }
/* 빌려 온 요소: 예측, 의미, 문제 해결 전략, 문제 종류 */
.q-predict { border: 1px dashed var(--ink-3); border-radius: 2px; padding: 12px 16px; margin: 4px 0 14px; background: var(--card); }
.q-predict > .lb, .q-strategy > .lb { display: block; margin-bottom: 4px; font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.q-predict details { margin-top: 6px; }
.q-meaning {  padding: 4px 0 4px 14px; margin: 12px 0; }
.q-meaning > h3 { margin-bottom: 4px; }
.q-strategy { border: 1px solid var(--ink);  border-radius: 0; padding: 12px 16px; margin: 12px 0; background: var(--card); }
.q-strategy ol { margin: 4px 0 0 1.4em; padding: 0; display: grid; gap: 4px; list-style: decimal; }
.q-strategy ol > li { padding-left: 2px; }
.q-strategy ol > li::marker { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); }
.q-tag { display: inline-block; font-family: var(--f-mono); font-size: 11px; line-height: 1; padding: 3px 6px; margin-right: 6px; border: 1px solid var(--ink-3); border-radius: 2px; color: var(--ink-2); vertical-align: 1px; }
/* 본문(전공서적식) 카드: 이어 읽는 글, 번호 붙은 정의·정리·예제, 문장으로 쓴 증명 */
.q-card[data-kind="본문"] .q-badge { background: var(--ink); }
.q-body.q-text { display: block; }
.q-text { padding: 26px clamp(18px, 4vw, 48px) 32px; font-size: 16px; line-height: 1.85; max-width: 46em; }
.q-text > * + * { margin-top: 1em; }
.q-text h3 { margin-top: 2em; font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.4; }
.q-text h3 .no { font-family: var(--f-mono); font-weight: 500; color: var(--ink-3); margin-right: 8px; font-size: 15px; }
.q-text h3:first-child { margin-top: 0; }
.q-text .tb-goal { padding: 14px 18px; border: 1px solid var(--rule); background: var(--card); font-size: 14.5px; line-height: 1.7; }
.q-text .tb-goal b { display: block; font-size: 12px; font-family: var(--f-mono); color: var(--ink-3); font-weight: 500; margin-bottom: 4px; }
.q-text .tb-goal ul { padding-left: 1.2em; list-style: disc; }
.q-text .tb-env { padding: 12px 0 12px 16px;  }
.q-text .tb-env.thm { }
.q-text .tb-env.ex { }
.q-text .tb-env > .lb { display: block; font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.q-text .tb-env > .lb .nm { font-weight: 400; color: var(--ink-2); }
.q-text .tb-proof { font-size: 15.5px; }
.q-text .tb-proof > .lb { font-weight: 700; margin-right: 6px; }   /* 한글 꼬리표는 기울이지 않음 */
.q-text .tb-proof .qed { float: right; color: var(--ink-3); }
.q-text .tb-note { padding: 10px 14px; background: var(--warn-bg);  font-size: 15px; }
.q-text .tb-note > b:first-child { color: var(--warn); margin-right: 6px; }
.q-text .tb-aside { font-size: 14px; color: var(--ink-2); padding-left: 14px; border-left: 1px solid var(--rule); }
.q-text .tb-summary { padding: 14px 18px; background: var(--right-bg); }
.q-text .tb-summary ol { padding-left: 1.3em; list-style: decimal; }
.q-text ol.tb-steps { padding-left: 1.4em; list-style: decimal; }
.q-text ol.tb-steps > li + li { margin-top: .35em; }
.q-text .tb-exercises > ol { padding-left: 1.4em; list-style: decimal; }
.q-text .tb-exercises > ol > li + li { margin-top: 1em; }
.q-text .tb-exercises details { margin-top: 4px; font-size: 15px; }
.q-text .tb-exercises summary { cursor: pointer; color: var(--forest); font-size: 13.5px; }
.q-text .tb-lv { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); margin-top: 1.4em; }
/* ═════════ 카드 글을 한 단계씩: 소제목이 있는 구역(풀이·전략·의미…)을 하나씩 펼친다 (js/core.js) ═════════ */
.steps-mode { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: -10px; }
.steps-mode button { font: inherit; font-size: 11.5px; padding: 2px 9px; color: var(--ink-3); background: none; border: 1px solid var(--rule); border-radius: 2px; cursor: pointer; }
.steps-mode button[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.q-step > h3 { cursor: pointer; }
.q-step > h3 .st-ic { font-family: var(--f-mono); font-weight: 400; }
.steps-fold .q-step:not(.open) > :not(h3) { display: none; }
.steps-fold .q-step:not(.open) { cursor: pointer; padding-bottom: 2px; }
.steps-fold .q-step:not(.open) > h3 { margin-bottom: 0; }
.steps-fold .q-step:not(.open):hover > h3 { text-decoration: underline; }
.q-body:not(.steps-fold) .st-ic, .q-body:not(.steps-fold) .step-next { display: none; }
.step-next { display: block; margin-top: 10px; font: inherit; font-size: 12.5px; color: var(--forest); background: none; border: 1px solid var(--rule); border-radius: 2px; padding: 3px 10px; cursor: pointer; }
.step-next:hover { border-color: var(--forest); }
@media print { .steps-fold .q-step > * { display: revert !important; } .step-next, .steps-mode { display: none !important; } }
/* 요령 카드: 언제 쓰는가 → 요령 단계 → 흔한 실수 → 바로 풀어보기 → 영상 콘티 */
.q-card[data-kind="요령"] .q-badge { display: none; }  /* 색 칩 없이 머리 줄의 kind 글자로만 표시 */
.q-when { padding: 12px 16px; background: var(--right-bg); }
.q-tip { counter-reset: tp; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.q-tip > li { counter-increment: tp; display: grid; grid-template-columns: minmax(7em, 12em) minmax(0, 1fr); gap: 4px 18px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.q-tip > li > b { font-weight: 600; color: var(--ink); }
.q-tip > li > b::before { content: counter(tp); display: inline-block; min-width: 1.6em; font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--forest); }
@media (max-width: 640px) { .q-tip > li { grid-template-columns: minmax(0, 1fr); } }
.q-links { font-size: 14.5px; }
.q-board > ol { counter-reset: sc; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.q-board > ol > li { counter-increment: sc; display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px dotted var(--rule); font-size: 14px; line-height: 1.6; }
.q-board > ol > li:last-child { border-bottom: 0; }
.q-board > ol > li > b { font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.q-board > ol > li > b::before { content: "장면 " counter(sc) " · "; }
.q-board .cap::before { content: "자막  "; font-family: var(--f-mono); font-size: 11px; color: var(--forest); }
.q-board .scr::before { content: "화면  "; font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }