/* 절 페이지(c/<과목>/<대단원>-<절>.html) — 앱 틀(css/app.css) 안에서 읽는 화면.
   왼쪽 사이드바 가운데에 '이 절의 카드'(단계 표시)와 같은 대단원의 절, 오른쪽 작업 패널에 머리글과 카드.
   카드 안의 그림·본문 서식(shared.css)은 건드리지 않는다. */
body[data-sec] .main-in { max-width: 1160px; }
body[data-sec] .main-in > * { animation: none; }   /* 카드가 많은 화면이라 떠오르는 움직임은 쓰지 않는다 */

/* 읽은 정도 막대: 작업 패널 위 가장자리(transform만 바꾼다) */
.readbar { position: fixed; top: 0; left: var(--side-w); right: 0; z-index: 45; height: 2px; pointer-events: none; }
.readbar i { display: block; height: 100%; background: var(--forest); transform: scaleX(var(--read, 0)); transform-origin: 0 50%; }

/* 위치(과목 / 대단원 / 절) */
body[data-sec] .main-in > .crumbs { display: flex; gap: 8px; margin-bottom: 14px; font-size: 13px; color: var(--ink-3); }
body[data-sec] .crumbs a { color: var(--ink-2); text-decoration: none; }
body[data-sec] .crumbs b { font-weight: 600; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { body[data-sec] .crumbs a:hover { color: var(--ink); text-decoration: underline; } }

/* 머리: 제목, 그 아래 성취기준·분량 한 줄(과목·대단원은 위치 표시가 이미 말한다), 도입 글, 먼저 알면 좋은 것 */
body[data-sec] .topic-hero { display: flex; flex-direction: column; padding: 6px 0 clamp(20px, 3vw, 32px); border-bottom: 0; }
body[data-sec] .topic-hero > * { order: 3; }
body[data-sec] .topic-hero h1 { order: 1; }
body[data-sec] .topic-hero .meta { order: 2; gap: 0; margin: 8px 0 0; }
body[data-sec] .tag-pill { display: inline; height: auto; padding: 0; font: 400 13.5px var(--f-kr); color: var(--ink-3); background: none; border: 0; font-variant-numeric: tabular-nums; }
body[data-sec] .tag-pill + .tag-pill::before { content: "·"; margin: 0 7px; }
body[data-sec] .topic-hero h1 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.25; text-wrap: balance; }
body[data-sec] .topic-hero .lead { margin-top: 16px; max-width: 42em; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.75; color: var(--ink-2); }
body[data-sec] .prereq { gap: 6px 8px; margin-top: 18px; }
body[data-sec] .prereq > .mono { font-family: var(--f-kr); font-size: 13px; color: var(--ink-3); }
body[data-sec] .prereq :is(.p-card, .p-basic, span.p) { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; font-size: 13.5px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; transition: transform 160ms var(--ease-out), border-color 150ms ease; }
body[data-sec] .prereq .p-basic { border-style: dashed; }
body[data-sec] .prereq :is(.p-card, .p-basic):active { transform: scale(.97); }
body[data-sec] .topic-layout { display: block; padding: 0; }

/* 사이드바의 '이 절의 카드': 단계 표시(지금 카드 = 초록 고리, 본 카드 = 체크, 안 본 카드 = 빈 원) */
body[data-sec] .toc { position: static; margin-top: 4px; font-size: 13.5px; }
body[data-sec] .toc .toc-title { margin: 12px 0 6px; }
body[data-sec] .toc ol { display: block; }
body[data-sec] .toc li { position: relative; }
body[data-sec] .toc li a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 7px 8px 7px 32px; margin: 1px 0; color: var(--ink-2); text-decoration: none; border-top: 0; border-radius: 8px; line-height: 1.4; transition: background-color 150ms ease, color 150ms ease; }
body[data-sec] .toc li a .mono { font-family: var(--f-kr); font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
body[data-sec] .toc li a::before { content: ""; position: absolute; left: 10px; top: 10px; width: 13px; height: 13px; box-sizing: border-box; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--paper); right: auto; rotate: none; transition: border-color 200ms ease, background-color 200ms ease; }
body[data-sec] .toc li a.seen { padding-right: 8px; }
body[data-sec] .toc li a.seen::before { top: 10px; left: 10px; right: auto; width: 13px; height: 13px; border: 0; rotate: none; background: var(--ink-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5.1 8.2 9 4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
body[data-sec] .toc li a.on { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--ink) 7%, transparent); }
body[data-sec] .toc li a.on .mono { color: var(--forest); }
body[data-sec] .toc li a.on::before { border: 3.5px solid var(--forest); background: var(--surface); }
body[data-sec] .toc li a.seen.on::before { border: 0; background-color: var(--forest); }
body[data-sec] .toc li a.noted::after { right: 8px; top: 12px; }
body[data-sec] .toc .progress { margin: 8px 0 0; padding: 8px 10px 0; font-size: 12.5px; color: var(--ink-3); border-top: 1px solid var(--line); }
body[data-sec] .toc-px { margin-top: 8px; padding: 10px 12px; background: var(--surface); border-radius: 8px; transition: transform 160ms var(--ease-out), border-color 150ms ease; }
body[data-sec] .toc-px .mono { font-family: var(--f-kr); font-size: 11.5px; font-weight: 600; }
body[data-sec] .toc-px b { font-size: 13.5px; }
body[data-sec] .toc-px:active { transform: scale(.98); }
body[data-sec] .toc .toc-links { margin-top: 8px; padding: 0 10px; font-size: 12.5px; }
body[data-sec] .toc .toc-links a { color: var(--ink-3); }

/* 사이드바의 같은 대단원 절 */
.side-ch { margin-top: 6px; }
.side-ch .sg-h a { color: inherit; text-decoration: none; }
.sl.sec { grid-template-columns: 2.6em minmax(0, 1fr); }
.sl-no { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sl.sec.done .sl-no { color: transparent; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6 9.5 3.6' fill='none' stroke='%23686b72' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 2px 50% / 12px no-repeat; }
.sl.sec[aria-current="page"] .sl-no { color: var(--forest); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  body[data-sec] .toc li a:not(.on):hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
  body[data-sec] .toc-px:hover { border-color: var(--ink-3); }
  body[data-sec] .prereq :is(.p-card, .p-basic):hover { border-color: var(--ink-3); }
}

/* 카드 머리: 종류(작은 회색 꼬리표) + 제목 + 도구 단추 */
body[data-sec] .card { background: var(--card); }   /* 캔버스가 그리는 종이 색과 같게: 그림 칸이 짧아도 바탕이 끊기지 않는다 */
body[data-sec] .card-head { gap: 12px; padding: 16px 22px; align-items: center; }
body[data-sec] .card-head .no { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; font: 600 12px var(--f-kr); color: var(--ink-2); background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 4px; white-space: nowrap; }
body[data-sec] .card-head h2 { font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; letter-spacing: -.025em; }
body[data-sec] .card-head .kind { font-family: var(--f-kr); font-size: 12px; }
body[data-sec] :is(.card-max, .card-head .nb-memo) { height: 30px; border-color: var(--line-strong); border-radius: 8px; background: var(--surface); transition: transform 160ms var(--ease-out), border-color 150ms ease, color 150ms ease; }
body[data-sec] .card-head .nb-memo { padding: 0 11px; font-family: var(--f-kr); font-size: 12px; }
body[data-sec] :is(.card-max, .card-head .nb-memo):active { transform: scale(.95); }
body[data-sec] .card-fig { top: 16px; }   /* 상단바가 없으니 그림 칸은 화면 위에 붙는다 */
body[data-sec] .video-block { border-radius: var(--r-lg); overflow: clip; }
body[data-sec] :is(.pf-built, .pf-pool li, .spot, .lab-tbl, .reading-body .judge, .basic-body .ex) { border-radius: var(--r-sm); }
body[data-sec] .spot, body[data-sec] .lab-tbl { overflow: clip; }

/* 확인 문제: 선지는 읽기 좋은 폭까지만. 선지가 모두 짧으면 두 칸으로 나란히(js/core.js가 .opts-short를 붙인다) */
body[data-sec] .quiz { padding: 18px 22px 22px; background: color-mix(in srgb, var(--ink) 2.5%, var(--card)); }
body[data-sec] .quiz h3 .mono { font-family: var(--f-kr); font-weight: 600; }
body[data-sec] .quiz .q { max-width: 46em; }
body[data-sec] .quiz ol { max-width: 46rem; }
body[data-sec] .quiz.opts-short ol { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 40rem; }
body[data-sec] .quiz button.opt { padding: 11px 14px; background: var(--surface); border-color: var(--line-strong); border-radius: 8px; }
body[data-sec] .quiz button.opt.right { border-color: var(--forest); background: var(--right-bg); }
body[data-sec] .quiz button.opt.wrong { border-color: var(--warn); background: var(--warn-bg); }

/* 연관 카드, 연습문제 버튼, 절 이동 */
body[data-sec] .rel { margin-left: 14px; margin-right: 14px; background: color-mix(in srgb, var(--ink) 3%, var(--paper)); }
body[data-sec] .px-go { background: var(--surface); transition: transform 160ms var(--ease-out), border-color 150ms ease; }
body[data-sec] .px-go .mono { font-family: var(--f-kr); font-size: 12.5px; font-weight: 600; }
body[data-sec] .px-go:active { transform: scale(.99); }
body[data-sec] .next { gap: 12px; margin: 20px 0 8px; }
body[data-sec] .next a, body[data-sec] .next div { display: grid; gap: 4px; padding: 18px 20px; }
body[data-sec] .next a { background: var(--surface); }
body[data-sec] .next a:last-child { text-align: right; }
body[data-sec] .next .mono { font-family: var(--f-kr); font-size: 12.5px; color: var(--ink-3); }
body[data-sec] .next b { font-size: 16.5px; letter-spacing: -.02em; }
@media (hover: hover) and (pointer: fine) {
  body[data-sec] .px-go:hover { border-color: var(--ink-3); }
  body[data-sec] :is(.card-max, .card-head .nb-memo):hover { border-color: var(--ink-3); color: var(--ink); }
}

@media (max-width: 900px) {
  .readbar { left: 0; top: 54px; }
  body[data-sec] .card-fig { top: 62px; }
}
@media (max-width: 640px) {
  body[data-sec] .card-head { padding: 14px; }
  body[data-sec] .next a:last-child { text-align: left; }
  body[data-sec] .quiz.opts-short ol { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-sec] :is(.prereq .p-card, .prereq .p-basic, .toc-px, .px-go, .card-max, .card-head .nb-memo):active { transform: none; }
}

/* 본문 카드: 글 단(42em, shared.css)을 카드 가운데에 두고, 머리(제목·단추)도 그 단에 맞춘다. 전체 화면에서도 가운데 */
/* 글 단 폭: 넓은 화면에서는 카드를 채우도록 넓힌다(한 줄 60자 안팎). 전체 화면은 조금 더 */
body[data-sec] .card.reading { --col: 920px; }
body[data-sec] .card.reading.is-max { --col: 1080px; }
body[data-sec] [data-kind="본문"] .q-text > * { max-width: none; }
@media (min-width: 1400px) { body[data-sec] [data-kind="본문"] .q-text { font-size: 16.5px; } }
body[data-sec] [data-kind="본문"] .q-text { padding-inline: max(clamp(16px, 4vw, 44px), calc((100% - var(--col)) / 2)); }
body[data-sec] .card.reading > .card-head { padding-inline: max(22px, calc((100% - var(--col)) / 2)); }
body[data-sec] .card.reading.is-max > :is(.card-head, .q-text) { max-width: none; }

/* 연관 카드: 구분(먼저 볼 카드·다른 과목에서·이어지는 카드) | 과목·절 | 제목 세 줄로 맞춘다 */
body[data-sec] .rel { gap: 0; padding: 6px 20px; font-size: 14px; }
body[data-sec] .rel > div { display: grid; grid-template-columns: 7.5em 8.5em minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 8px 0; }
body[data-sec] .rel > div + div { border-top: 1px solid var(--line); }
body[data-sec] .rel > div > .mono { grid-column: 1; grid-row: 1; width: auto; font-family: var(--f-kr); font-size: 12.5px; color: var(--ink-3); }
body[data-sec] .rel a { display: grid; grid-template-columns: subgrid; grid-column: 2 / 4; padding: 3px 0; border-bottom: 0; line-height: 1.5; }
body[data-sec] .rel a small { margin: 0; font-family: var(--f-kr); font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) and (pointer: fine) { body[data-sec] .rel a:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--ink-3); } }
@media (max-width: 640px) {
  body[data-sec] .rel > div { grid-template-columns: 8em minmax(0, 1fr); }
  body[data-sec] .rel > div > .mono { grid-column: 1 / -1; }
  body[data-sec] .rel a { grid-column: 1 / -1; grid-row: auto; }
}