/* 합격열쇠 학습장 스타일 (학습장·열쇠 노트·문항 풀이 공통) */
:root { --navy-tint: #EEF3FA; --qfont: var(--sans); --mark-yellow: #fff1a8; --mark-green: #cdeccf; --mark-blue: #cfe3fb; --mark-pink: #fbd5e0; --compass-w: 300px; --fz: 1; }
/* 학습 설정 ⚙ 글자 크기(학습장·문제 창 — 전자책은 쪽이 정해져 있어 그대로) */
:root.fz-s { --fz: .9; }
:root.fz-l { --fz: 1.15; }
:root.qf-serif { --qfont: 'Noto Serif KR', 'Nanum Myeongjo', 'Batang', serif; }

/* 본문(마크다운) */
.md { font-size: calc(17px * var(--fz)); line-height: 1.75; color: var(--ink); }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 14px; }
.md h3 { font-family: var(--sans); font-weight: 800; font-size: calc(20px * var(--fz)); color: var(--navy-d); margin: 26px 0 10px; }
.md h4 { font-size: calc(17.5px * var(--fz)); font-weight: 800; color: var(--navy-d); margin: 20px 0 8px; }
.md ul, .md ol { margin: 0 0 14px; padding-left: 22px; }
.md li { margin: 4px 0; }
.md strong { color: var(--navy-d); }
.md blockquote { margin: 0 0 14px; padding: 12px 16px; border-left: 4px solid var(--navy); background: var(--navy-tint); border-radius: 0 12px 12px 0; color: var(--navy-d); }
.md blockquote p { margin: 0 0 6px; }
.md blockquote p:last-child { margin: 0; }
.md code { background: var(--soft); padding: 1px 6px; border-radius: 6px; font-size: .92em; }
.md figure { margin: 18px 0; text-align: center; }
.md figure img, .md p > img { border-radius: 12px; border: 1px solid var(--line); max-height: 520px; object-fit: contain; }
.md figcaption { font-size: calc(15px * var(--fz)); color: var(--muted); margin-top: 6px; }
/* 수식: 본문과 같은 글꼴·크기, 가운데 수식은 연한 상자에 담고 좁은 화면에서는 ×·= 앞뒤에서 줄바꿈 */
.md .katex { font-size: 1em; }
.md .katex :is(.mord, .mbin, .mrel, .mpunct, .mopen, .mclose, .minner, .mathnormal, .mathrm, .text, .textrm):not(.delimsizing):not(.op-symbol) { font-family: var(--sans); }
.md .katex .mathnormal { font-style: italic; }
.md .mathbox { display: block; margin: 4px 0 16px; padding: 14px 16px; background: var(--soft); border-radius: 14px; text-align: center; line-height: 2.2; overflow-x: auto; overflow-y: hidden; }
.md .mathbox .katex { white-space: normal; }
/* 관계도 등 글 상자: 좁은 화면에서 옆으로 넘치지 않게 줄바꿈 */
.md pre { margin: 0 0 14px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; font-family: ui-monospace, 'D2Coding', 'Nanum Gothic Coding', Menlo, Consolas, monospace;
  font-size: calc(15px * var(--fz)); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; color: var(--ink); }
.md pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; font-family: inherit; }
/* 관계도(갑을병정)·흐름도·범례 — 원고의 ```관계도 · ```흐름도 · ```범례 블록을 fig.js 가 그림으로 바꿈 */
.md figure.relfig { margin: 6px 0 16px; text-align: left; }
.relfig svg { display: block; max-width: 100%; height: auto; }
.flowfig { margin: 6px 0 16px; padding: 14px 16px 16px; background: #f8fafd; border: 1px solid var(--line); border-radius: 14px; font-size: calc(16px * var(--fz)); line-height: 1.5; container-type: inline-size; }
.fl-tree + .fl-tree { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line2); }
.fl-root { display: inline-block; background: var(--navy-d); color: #fff; font-weight: 700; padding: 6px 13px; border-radius: 10px; line-height: 1.45; }
.flowfig ul { list-style: none; margin: 0; padding: 0 0 0 14px; }
.flowfig li { position: relative; margin: 0; padding: 10px 0 0 22px; }
.flowfig li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--line2); }
.flowfig li:last-child::before { bottom: auto; height: 27px; }
.flowfig li::after { content: ''; position: absolute; left: 0; top: 27px; width: 16px; border-top: 2px solid var(--line2); }
.fl-node { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fl-q { background: #fff; border: 1.5px solid var(--line2); border-radius: 10px; padding: 4px 11px; font-weight: 600; line-height: 1.45; }
.fl-to { width: 18px; height: 12px; flex: none; background: no-repeat center/18px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M1 6h14M11 2l4 4-4 4' fill='none' stroke='%238a96a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fl-res { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; padding: 3px 11px 3px 5px; border-radius: 10px; border: 1.5px solid; line-height: 1.45; }
.fl-res b { color: #fff; padding: 1px 10px; border-radius: 999px; font-size: calc(14px * var(--fz)); }
.fl-res span { font-size: calc(15px * var(--fz)); }
.fl-res.bad { background: var(--bad-soft); border-color: #f3b8b2; } .fl-res.bad b { background: var(--bad); } .fl-res.bad span { color: #7a1a12; }
.fl-res.warn { background: var(--gold-soft); border-color: #e9cf86; } .fl-res.warn b { background: #a87800; } .fl-res.warn span { color: var(--gold-ink); }
.fl-res.ok { background: var(--ok-soft); border-color: #a9d8bf; } .fl-res.ok b { background: var(--ok); } .fl-res.ok span { color: #134a30; }
.fl-res.navy { background: var(--soft); border-color: var(--line2); } .fl-res.navy b { background: var(--navy); } .fl-res.navy span { color: var(--navy-d); }
@container (max-width: 520px) {   /* 좁은 자리(휴대폰·문제 창): 결론은 갈래 아래 줄로 */
  .flowfig ul { padding-left: 6px; }
  .flowfig li { padding-left: 18px; }
  .flowfig li::after { width: 13px; }
  .fl-node { flex-direction: column; align-items: flex-start; gap: 5px; }
  .fl-to { display: none; }
}
/* 그림 접기(학습장·문제 창 — 전자책은 늘 펼침): 펼쳤을 때는 그림 위 오른쪽 작은 '그림 접기', 접으면 한 줄 띠 */
.figbox { margin: 6px 0 16px; }
.md .figbox > figure.relfig, .figbox > .flowfig { margin: 0; }
.figbar { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 2px; font-size: 14px; line-height: 1.5; }
.figbar .figlab, .figbar .figcast, .figbar .fighint, .figbar .figall { display: none; }
.figtg { display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; padding: 3px 8px; border-radius: 8px; white-space: nowrap; }
.figtg:hover { background: var(--soft); color: var(--navy-d); }
.figtg i { display: inline-flex; font-style: normal; }
.figbox.fold > figure, .figbox.fold > .flowfig { display: none; }
.figbox.fold .figbar { justify-content: flex-start; background: #f8fafd; border: 1px dashed var(--line2); border-radius: 12px; padding: 10px 12px 10px 14px; margin: 0; }
.figbox.fold .figlab { display: inline-flex; font-weight: 800; color: #fff; background: var(--navy); border-radius: 6px; padding: 1px 8px; font-size: 14px; }
.figbox.fold .figcast { display: inline; flex: 1 1 220px; min-width: 0; color: var(--navy-d); font-weight: 700; font-size: 15px; }
.figbox.fold .fighint { display: inline; color: var(--muted); }
.figbox.fold .figtg { color: var(--navy); background: #fff; border: 1px solid var(--line2); padding: 4px 12px; }
.figbox.fold .figtg:hover { border-color: var(--navy); }
.figbox.fold .figall { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); cursor: pointer; font-size: 14px; white-space: nowrap; }
.figbox.fold .figall input { margin: 0; width: 15px; height: 15px; accent-color: var(--navy); }
.rel-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 16px; padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; color: var(--sub); }
.rel-legend span { display: inline-flex; align-items: center; gap: 8px; }
.rel-legend svg { flex: none; }
.tbl-scroll { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 12px; }
.md table { border-collapse: collapse; width: 100%; font-size: calc(16px * var(--fz)); line-height: 1.6; background: #fff; }
.md th, .md td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.md th { background: var(--soft); color: var(--navy-d); font-weight: 700; white-space: nowrap; }
.md tr:last-child td { border-bottom: 0; }

/* 용어 표시 */
.term { all: unset; cursor: pointer; border-bottom: 2px dotted #7f95bd; color: inherit; }
.term:hover, .term:focus-visible { background: var(--soft); outline: none; }
/* 학습 설정 ⚙ 에서 용어 점선을 끄면: 점선 없이 보통 글처럼(눌러도 풀이를 띄우지 않음) */
html.terms-off .term { border-bottom-color: transparent; cursor: text; }
html.terms-off .term:hover, html.terms-off .term:focus-visible { background: none; }
.pop { position: absolute; z-index: 60; width: min(340px, calc(100vw - 24px)); background: #fff; border: 1px solid var(--line2); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(20,38,74,.18); padding: 14px 16px; font-size: 16px; line-height: 1.7; }
.pop h4 { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--navy-d); }
.pop .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pop .acts a, .pop .acts button { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; min-height: 36px; padding: 0 12px; }

/* 형광펜 */
mark.hl { padding: 1px 0; border-radius: 3px; color: inherit; cursor: pointer; }
mark.hl-yellow { background: var(--mark-yellow); } mark.hl-green { background: var(--mark-green); }
mark.hl-blue { background: var(--mark-blue); } mark.hl-pink { background: var(--mark-pink); }
mark.hl-under { background: none; text-decoration: underline 2.5px #d33; text-underline-offset: 3px; text-decoration-skip-ink: none; }
mark.hl[data-memo]::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 2px; vertical-align: super; background: no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3a68' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3C/svg%3E"); }
.seltool { position: absolute; z-index: 61; display: flex; gap: 4px; align-items: center; background: var(--navy-d); padding: 6px; border-radius: 12px; box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.seltool button { min-height: 34px; min-width: 34px; border-radius: 9px; border: 0; cursor: pointer; font: inherit; font-size: 14px; color: #fff; background: transparent; padding: 0 8px; }
.seltool button:hover { background: rgba(255,255,255,.14); }
.seltool .sw { width: 22px; height: 22px; min-width: 22px; min-height: 22px; border-radius: 50%; border: 2px solid #fff; padding: 0; }

/* 학습 레이아웃 */
.lrn { display: flex; align-items: flex-start; min-height: calc(100vh - 70px); }
.lrn-main { flex: 1 1 auto; min-width: 0; padding: 24px 20px 80px; }
.lrn-col { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

/* ── 학습장 바: 학습장(과목 지도·절 화면)에서 사이트 머리줄 대신 — 남색 바 + 금색 등불 선(과목 진도·읽은 만큼) */
.wkbar { position: sticky; top: 0; z-index: 30; background: var(--navy-d); color: #fff; }
.sb-row { height: 56px; display: flex; align-items: center; gap: 6px; padding: 0 16px 0 8px; }
.sb-ic { flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.sb-ic:hover { background: rgba(255,255,255,.1); }
.sb-ic.on { background: rgba(255,255,255,.16); }
.sb-ic[hidden] { display: none; }
.wkbar :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sb-room { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 4px 8px 4px 6px; border-radius: 10px; color: #fff; text-decoration: none; }
.sb-room:hover { color: #fff; background: rgba(255,255,255,.08); }
.sb-room img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); background: #dee8f7; object-fit: cover; }
.sb-room span { font-family: var(--sans); font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.sb-div { flex: 0 0 auto; width: 1px; height: 24px; background: rgba(255,255,255,.2); margin: 0 8px; }
.sb-subj { flex: 0 1 auto; min-width: 0; height: 36px; border: 0; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; display: flex; align-items: center; gap: 6px;
  padding: 0 10px 0 14px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.sb-subj:hover, .sb-subj.on { background: rgba(255,255,255,.18); }
.sb-sn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-subj svg { flex: 0 0 auto; }
.sb-crumb { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; margin-left: 12px; font-size: 14px; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; }
.sb-crumb a { color: rgba(255,255,255,.72); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.sb-crumb a:hover { color: #fff; text-decoration: underline; }
.sb-crumb i { display: flex; flex: 0 0 auto; }
.sb-crumb b { color: #fff; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.sb-title { display: none; }
.sb-tools { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.sb-tools .hd-net { margin-right: 6px; }
.sb-exit { flex: 0 0 auto; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35); color: #fff; display: flex; align-items: center; gap: 7px;
  padding: 0 14px 0 11px; font-size: 14.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.sb-exit:hover { color: #fff; background: rgba(255,255,255,.1); }
.sb-ic.sb-home { display: none; }   /* 휴대폰만: 처음 화면으로 가는 집 단추(PC·태블릿은 '⌂ 나가기') */
.sb-line { height: 3px; background: #26365a; }
.sb-line i { display: block; height: 3px; width: 0; background: var(--gold); box-shadow: 0 0 8px 0 var(--gold); transition: width .3s ease; }
@media (max-width: 1179px) { .sb-crumb > a, .sb-crumb > i { display: none; } }   /* 위치줄은 지금 칸만 */
@media (max-width: 860px) { .sb-crumb { display: none; } }
@media (max-width: 640px) {
  .wkbar { transition: transform .22s ease; }
  html.hd-hidden .wkbar { transform: translateY(calc(-100% + 3px)); }   /* 읽어 내려가면 바는 숨고 등불 선만 남음 */
  .sb-row { height: 52px; gap: 0; padding: 0 4px; }
  .sb-room, .sb-div, .sb-crumb, .sb-fs { display: none !important; }
  .sb-subj { flex: 1 1 auto; justify-content: flex-start; height: 40px; background: none; padding: 0 6px; font-size: 16px; font-weight: 800; gap: 4px; }
  .sb-y { display: none; }   /* 휴대폰: '1차' 는 빼고 과목 이름만 */
  .wkbar.has-title .sb-subj { display: none; }
  .wkbar.has-title .sb-title { display: block; flex: 1 1 auto; min-width: 0; padding: 0 6px; font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sb-exit { display: none; }
  .sb-ic.sb-home { display: grid; order: 1; }   /* 어디서든 첫 화면으로(학습장 안에서 '나가기 → 내 학습' 대신) */
  .sb-tools { order: 2; margin-left: 0; gap: 0; }
  .sb-tools .hd-net { margin-right: 2px; }
  .inapp + .wkbar { box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }   /* 앱 안의 브라우저 안내 띠와 나뉘어 보이게 */
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) { .wkbar { transition: none; } }

/* ── 학습 지도(☰): 지금 위치 · 다음에 할 곳 · 이 과목 목차. PC·태블릿은 학습장 바 아래(절 화면 넓은 PC는 붙음), 휴대폰은 왼쪽에 꽉 차게 */
.compass { position: fixed; top: var(--hd-h, 0px); left: 0; bottom: 0; width: var(--compass-w); max-width: 88vw; background: #fff; border-right: 1px solid var(--line);
  transform: translateX(-100%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; z-index: 40; display: flex; flex-direction: column; }
.compass.open { transform: none; visibility: visible; transition: transform .22s ease; box-shadow: 8px 0 30px rgba(20,38,74,.14); }
.compass.docked { box-shadow: none; z-index: 25; }
.compass-bg { position: fixed; inset: var(--hd-h, 0px) 0 0 0; background: rgba(20,38,74,.3); z-index: 39; }
.cd-hd { display: none; }
.compass-bd { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px 16px; font-size: 15px; }
.ct-empty { margin: 8px 6px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.cd-ft { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.cd-ft[hidden] { display: none; }
.cd-map { width: 100%; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--navy); }
.cd-links { display: flex; gap: 6px; }
.cd-links a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; border-radius: 10px; background: var(--bg); color: var(--navy-d);
  text-decoration: none; font-size: 14px; font-weight: 700; }
.cd-links a:hover { background: var(--soft); color: var(--navy-d); }
.cd-links svg { width: 16px; height: 16px; color: var(--navy); }
/* 다음 공부(절 화면만) — 지금 위치는 목차의 남색 줄 */
.here { flex: 0 0 auto; margin: 14px 14px 6px; }
.here[hidden] { display: none; }
.here-next { display: flex; align-items: center; gap: 8px; text-decoration: none; background: var(--navy-tint); border: 1px solid transparent;
  border-radius: 10px; padding: 9px 10px 9px 12px; color: var(--navy-d); }
.here-next:hover { border-color: var(--navy); color: var(--navy-d); }
.here-next:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.here-next small { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.here-next span { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: 15px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.here-next svg { flex: 0 0 auto; color: var(--navy); }
/* 목차: 장 ▸ 절 */
.ctree { display: flex; flex-direction: column; }
.ctree ul { list-style: none; margin: 0; padding: 0; }
.ct-grp[hidden] { display: none !important; }
.ct-row { all: unset; box-sizing: border-box; display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 7px 8px; border-radius: 8px; cursor: pointer;
  color: var(--sub); font-size: 15px; line-height: 1.45; text-decoration: none; }
.ct-row:hover { background: var(--bg); color: var(--ink); }
.ct-row:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.ct-t { flex: 1 1 auto; min-width: 0; }
.ct-side { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); font-weight: 700; line-height: 20px; }   /* 내 학습 */
.ct-side.soon { color: var(--navy-d); background: var(--navy-tint); border-radius: 6px; padding: 0 7px; font-size: 14px; }
.tw { flex: 0 0 auto; width: 12px; height: 20px; position: relative; }
.tw::before { content: ''; position: absolute; left: 2px; top: 5px; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent currentColor;
  opacity: .65; transition: transform .15s; }
[aria-expanded="true"] > .tw::before { transform: rotate(90deg); }
.tw.none::before { display: none; }
.ct-c { font-weight: 700; color: var(--ink); font-size: 15.5px; padding: 8px; }
.cur-c > .ct-c { background: var(--soft); color: var(--navy-d); font-weight: 800; }
.ct-ch > .ct-grp { padding: 2px 0 6px 14px; display: flex; flex-direction: column; gap: 1px; }
.lk { display: inline-flex; vertical-align: -2px; color: var(--muted); }
.lk svg { width: 14px; height: 14px; }
.mini { width: 34px; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; display: inline-block; }
.mini > i { display: block; height: 100%; background: var(--ok); }
.ct-num { flex: 0 0 auto; min-width: 26px; text-align: right; font-size: 14px; color: var(--muted); font-weight: 700; line-height: 20px; }
.ct-num.on { color: var(--ok); }
.ct-i { font-size: 15px; padding: 6px 8px; }
.ct-i .code { font-weight: 700; color: var(--navy); }
.ct-i > .dot { margin-top: 4px; }
.ct-x .xm { color: var(--navy-d); font-weight: 700; }
.ct-row.cur { background: var(--navy); color: #fff; font-weight: 700; }
.ct-row.cur .code, .ct-row.cur .xm { color: #fff; }
.ct-row.cur .dot { border-color: #fff; }
.ct-row.cur .dot.started { border-color: #fff; background: linear-gradient(90deg, transparent 50%, var(--gold) 50%); }
.ct-row .wait { font-size: 14px; padding: 1px 6px; align-self: center; }
.rate { flex: 0 0 auto; font-size: 14px; font-weight: 800; border-radius: 6px; padding: 0 6px; line-height: 20px; }
.rate.lo { background: var(--bad-soft); color: var(--bad); } .rate.mid { background: var(--gold-soft); color: var(--gold-ink); } .rate.hi { background: var(--ok-soft); color: var(--ok); }
.dot { flex: 0 0 auto; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; border: 2px solid var(--line2); }
.dot.started { border-color: var(--gold); background: linear-gradient(90deg, var(--gold) 50%, transparent 50%); }
.dot.done { border-color: var(--ok); background: var(--ok); }
.dot.lock { border-color: var(--line2); background: var(--line); }
.goalbox { background: var(--navy-tint); border-radius: 12px; padding: 12px 14px; color: var(--navy-d); }
.goalbox .md { font-size: calc(16px * var(--fz)); line-height: 1.7; color: var(--ink); }
.goalbox .md strong { color: var(--navy-d); }
@media (min-width: 1180px) {
  .lrn.docked .lrn-main { margin-left: var(--compass-w); }
  body.compass-docked .ft { margin-left: var(--compass-w); }
}
@media (max-width: 640px) {
  .compass { top: 0; width: 320px; z-index: 47; }
  .compass-bg { inset: 0; z-index: 46; background: rgba(15,25,48,.55); }
  .cd-hd { display: flex; flex-direction: column; flex: 0 0 auto; background: var(--navy-d); color: #fff; padding: 4px 4px 0 16px; }
  .cd-top { height: 44px; display: flex; align-items: center; justify-content: space-between; }
  .cd-top b { font-family: var(--sans); font-size: 18px; font-weight: 800; }
  .cd-x { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
  .cd-subj { margin: 6px 12px 12px 0; height: 42px; border: 0; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; display: flex; align-items: center; gap: 6px;
    padding: 0 10px 0 12px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-align: left; }
  .cd-subj.on { background: rgba(255,255,255,.18); }
  .cd-subj .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cd-subj .p { flex: 0 0 auto; font-size: 14px; color: var(--gold); }
  .cd-hd :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .cd-line { height: 3px; background: #26365a; margin: 0 -4px 0 -16px; }
  .cd-line i { display: block; height: 3px; width: 0; background: var(--gold); box-shadow: 0 0 8px 0 var(--gold); }
  .here { margin: 12px 12px 4px; }
  .compass-bd { padding: 0 8px 12px; }
  .ct-c { font-size: 16px; padding: 9px 8px; }
  .ct-i { font-size: 15.5px; padding: 7px 8px; }
  .cd-ft { padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); }
  .cd-map { min-height: 46px; font-size: 15px; }
}

/* ── 학습장 바의 판: ⋮ 이 화면 도구 · ⚙ 학습 설정 · 과목 바꾸기 — PC는 단추 아래 작은 판, 휴대폰은 아래에서 올라오는 판 */
.sbl { position: fixed; z-index: 48; width: 290px; max-width: calc(100vw - 16px); max-height: calc(100vh - var(--hd-h, 56px) - 20px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px rgba(20,38,74,.22); padding: 8px; display: flex; flex-direction: column; color: var(--ink); }
.sbl-grip, .sbl-x { display: none; }
.sbl-bg { position: fixed; inset: 0; z-index: 47; background: rgba(15,25,48,.55); }
.sbl-hd { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px 8px; min-width: 0; }
.sbl-hd b { flex: 0 0 auto; font-family: var(--sans); font-size: 17px; font-weight: 800; color: var(--navy-d); }
.sbl-hd span { min-width: 0; font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbl-bd { display: flex; flex-direction: column; }
.sbl-i { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; }
.sbl-i:hover { background: var(--bg); color: var(--ink); }
.sbl-i:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.sbl-i svg { flex: 0 0 auto; color: var(--navy); }
.sbl-i span { flex: 1 1 auto; }
.sbl-i small { flex: 0 0 auto; font-size: 14px; color: var(--muted); font-weight: 600; }
.sbl-sep { height: 1px; background: var(--line); margin: 6px 8px; }
/* 과목 바꾸기 */
.sbl-subj { width: 360px; }
.sbl-subj .sbl-bd { gap: 6px; padding: 0 2px 2px; }
.sj { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
a.sj:hover { border-color: var(--navy); color: var(--ink); }
a.sj:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.sj .t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sj b { font-family: var(--sans); font-size: 16.5px; font-weight: 800; line-height: 1.4; }
.sj small { font-size: 14px; color: var(--muted); line-height: 1.45; }
.sj svg { flex: 0 0 auto; color: var(--muted); }
.sj.cur { border: 2px solid var(--navy); background: var(--soft); padding: 11px; }
.sj.cur b { color: var(--navy-d); }
.sj.cur small { color: var(--sub); }
.sj.cur svg { color: var(--navy); }
.sj.off { background: var(--bg); border-color: transparent; }
.sj.off.cur { border-color: var(--line2); }
.sj.off b { color: var(--sub); }
.sj .soon { flex: 0 0 auto; font-size: 14px; font-weight: 800; color: var(--navy-d); background: var(--navy-tint); border-radius: 999px; padding: 2px 9px; }
/* 학습 설정 */
.sbl-set { width: 340px; padding: 8px 14px 14px; }
.sbl-set .sbl-hd { padding: 6px 2px 8px; }
.sbl-set .sbl-bd { gap: 16px; }
.st-grp { display: flex; flex-direction: column; gap: 8px; }
.st-l { font-size: 15px; font-weight: 700; color: var(--sub); }
.seg3, .seg2 { display: grid; gap: 6px; background: var(--soft); border-radius: 12px; padding: 4px; }
.seg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg3 button, .seg2 button { height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--sub); font: inherit; font-size: 15px; display: flex; align-items: center;
  justify-content: center; gap: 6px; cursor: pointer; padding: 0 6px; }
.seg3 button i { font-style: normal; font-weight: 700; line-height: 1; }
.seg3 button.on, .seg2 button.on { background: #fff; box-shadow: 0 1px 4px rgba(20,38,74,.18); color: var(--navy-d); font-weight: 700; }
.seg3 button:focus-visible, .seg2 button:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.st-h { font-size: 14px; color: var(--muted); line-height: 1.5; }
.st-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.st-row > span, .st-link > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-row b, .st-link b { font-size: 15px; color: var(--sub); }
.st-row small, .st-link small { font-size: 14px; color: var(--muted); line-height: 1.45; }
.st-row input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--navy); cursor: pointer; }
.st-link { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; text-decoration: none; color: var(--ink); }
.st-link:hover b { color: var(--navy-d); text-decoration: underline; }
.st-link svg { flex: 0 0 auto; color: var(--muted); }
/* 학습장 이용 방법(안내 창 안) */
.sbh { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sbh li { display: flex; gap: 10px; align-items: flex-start; }
.sbh i { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; background: var(--navy-d); color: #fff; display: grid; place-items: center; }
.sbh i svg { width: 18px; height: 18px; }
.sbh span { padding-top: 3px; line-height: 1.55; }
.sbh-p { margin: 14px 0 0; }
@media (max-width: 640px) {
  .sbl { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; max-width: none; max-height: 86vh; border: 0; border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 30px rgba(15,25,48,.25); padding: 8px 12px calc(18px + env(safe-area-inset-bottom)); animation: sblUp .2s ease; }
  .sbl-grip { display: block; flex: 0 0 auto; align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--line2); margin: 2px 0 10px; }
  .sbl-hd { padding: 0 8px 8px; }
  .sbl-hd b { font-size: 18px; }
  .sbl-hd span { font-size: 14px; }
  .sbl-i { min-height: 52px; font-size: 16px; padding: 0 10px; gap: 14px; }
  .sbl-i svg { width: 22px; height: 22px; }
  .sbl-i small { font-size: 14px; }
  .sbl-x { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; margin-top: 10px; height: 48px; border: 0; border-radius: 12px; background: var(--soft);
    color: var(--navy-d); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
  .sbl-subj { padding: 8px 14px calc(18px + env(safe-area-inset-bottom)); }
  .sj b { font-size: 17px; }
  .sbl-set { padding: 8px 18px calc(18px + env(safe-area-inset-bottom)); }
  .sbl-set .sbl-hd { padding: 0 0 8px; }
  .seg3 button { height: 48px; }
}
@keyframes sblUp { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .sbl { animation: none; } }

/* 화면 제목 */
.page-title { font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; font-size: clamp(24px, 3.4vw, 30px); color: var(--navy-d); }

/* 개념 카드 */
.ccard { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; scroll-margin-top: 90px; }
.ccard > header { display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px; cursor: pointer; }
.ccard > header .k { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.ccard > header h3 { font-family: var(--sans); font-weight: 800; letter-spacing: -.01em; font-size: calc(19px * var(--fz)); color: var(--navy-d); }
.ccard > header p { margin: 2px 0 0; color: var(--muted); font-size: calc(15px * var(--fz)); line-height: 1.6; }
.ccard.fixed > header { cursor: default; }
.ccard.fixed > header .chev { display: none; }
.ccard > header .chev { margin-left: auto; display: flex; color: var(--muted); transition: transform .2s; }
.ccard.open > header .chev { transform: rotate(180deg); }
.ccard .cbody { display: none; padding: 0 20px 20px; flex-direction: column; gap: 16px; }
.ccard.open .cbody { display: flex; }
.cpart > h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--navy); letter-spacing: .02em; }
.cpart.trap { background: var(--bad-soft); border-radius: 12px; padding: 12px 14px; }
.cpart.trap > h4 { color: var(--bad); }
.cpart.trap .md { font-size: calc(17px * var(--fz)); }
.cpart.law { background: var(--soft); border-radius: 12px; padding: 12px 14px; }
.cpart.law .md { font-size: calc(16px * var(--fz)); }
.cpart .md { font-size: calc(17px * var(--fz)); }
.flips { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.flip { all: unset; box-sizing: border-box; cursor: pointer; min-height: 96px; border-radius: 14px; border: 1px solid var(--line2); padding: 12px 14px; background: #fff;
  display: flex; flex-direction: column; gap: 6px; font-size: calc(16px * var(--fz)); line-height: 1.6; }
.flip small { font-size: 14px; color: var(--muted); font-weight: 700; }
.flip .a { display: none; color: var(--ok); font-weight: 700; }
.flip.on { background: var(--ok-soft); border-color: #9fd3b4; }
.flip.on .a { display: block; }
.flip:focus-visible { outline: 2px solid var(--navy); }
.rel { display: flex; flex-wrap: wrap; gap: 6px; }
.rel a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; text-decoration: none; padding: 5px 10px; border-radius: 999px; background: var(--soft); color: var(--navy); font-weight: 600; }
/* 개념 카드 안에서 기출 한 문제씩 풀기 */
.rel .rq { font: inherit; font-size: 14px; padding: 5px 11px; border-radius: 999px; background: var(--soft); color: var(--navy); font-weight: 600; border: 1px solid transparent; cursor: pointer; }
.rel .rq:hover { border-color: var(--line2); }
.rel .rq.ok { background: var(--ok-soft); border-color: #9fd3b4; color: #14532d; }
.rel .rq.no { background: var(--bad-soft); border-color: #f0b4ad; color: #7a1a12; }
.rel .rq.cur { background: var(--navy); border-color: var(--navy); color: #fff; }
.rel .rq-all { background: var(--navy); color: #fff; }
.iq { margin-top: 12px; border: 1px solid var(--line2); border-radius: 16px; background: #fbfcfe; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.iq[hidden] { display: none; }
.iq-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.iq-hd b { color: var(--navy-d); }
.iq-hd .iq-x { margin-left: auto; }
.iq .qcard { padding: 16px; border-radius: 14px; gap: 14px; }
.iq-foot { display: flex; gap: 10px; flex-wrap: wrap; }
.iq-foot .btn { flex: 1 1 140px; }
.parties { display: flex; flex-wrap: wrap; gap: 10px; }
.parties figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; color: var(--sub); }
.parties img { width: 56px; height: 56px; object-fit: contain; }
details.more > summary { cursor: pointer; font-weight: 700; color: var(--navy); }

/* 문항 */
.qcard { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.qmeta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); }
.qstem { font-family: var(--qfont); font-size: calc(18px * var(--fz)); line-height: 1.8; font-weight: 600; color: var(--ink); }
.qstem.md blockquote { font-weight: 400; background: #fff; border: 1px solid var(--line2); border-radius: 12px; color: var(--ink); padding: 14px 16px; font-size: calc(16px * var(--fz)); }
.qstem.md blockquote p { margin: 0 0 4px; }
.choices { display: flex; flex-direction: column; gap: 10px; }
.choice { all: unset; box-sizing: border-box; display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 13px 14px; border: 1.5px solid var(--line2);
  border-radius: 14px; cursor: pointer; background: #fff; font-family: var(--qfont); font-size: calc(17px * var(--fz)); line-height: 1.7; }
.choice:hover:not([disabled]) { border-color: var(--navy); background: var(--bg); }
.choice:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.choice .no { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line2); display: grid; place-items: center; font-family: var(--sans); font-size: 14px; font-weight: 700; margin-top: 1px; }
.choice.pick { border-color: var(--navy); background: var(--soft); }
.choice.pick .no { background: var(--navy); color: #fff; border-color: var(--navy); }
.choice[disabled] { cursor: default; }
.choice.right { border-color: var(--ok); background: var(--ok-soft); }
.choice.right .no { background: var(--ok); border-color: var(--ok); color: #fff; }
.choice.wrong { border-color: var(--bad); background: var(--bad-soft); }
.choice.wrong .no { background: var(--bad); border-color: var(--bad); color: #fff; }
.choice .ctext { flex: 1; min-width: 0; }
.choice .ctext > .md p, .choice .ctext.md p { margin: 0; }
.choice .ctext.md { font-size: inherit; line-height: inherit; font-family: inherit; }
.ckey { margin-top: 8px; font-family: var(--sans); font-size: calc(16px * var(--fz)); line-height: 1.7; color: var(--sub); display: flex; flex-direction: column; gap: 6px; }
.ckey .md { font-size: calc(16.5px * var(--fz)); line-height: 1.7; color: var(--sub); }
.ox { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 14px; font-weight: 800; margin-right: 6px; }
.ox.o { background: var(--ok); color: #fff; } .ox.x { background: var(--bad); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cchip { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--navy); background: #fff; border: 1px solid var(--line2); padding: 3px 10px; border-radius: 999px; }
.cchip:hover, .cchip:focus-visible { border-color: var(--navy); }
.boxkeys { display: flex; flex-direction: column; gap: 8px; background: var(--bg); border-radius: 14px; padding: 14px; }
.boxkeys .row { display: flex; gap: 10px; align-items: flex-start; font-size: calc(16.5px * var(--fz)); line-height: 1.7; }
.boxkeys .lab { font-weight: 800; color: var(--navy-d); min-width: 18px; }
.conf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--soft); border-radius: 14px; padding: 14px; }
.conf b { width: 100%; font-size: 16px; color: var(--navy-d); }
.conf .btn { flex: 1 1 120px; }
.verdict { display: flex; gap: 12px; align-items: center; border-radius: 14px; padding: 14px 16px; font-weight: 700; }
.verdict.ok { background: var(--ok-soft); color: #14532d; }
.verdict.no { background: var(--bad-soft); color: #7a1a12; }
.verdict img { width: 46px; height: auto; }
.qkey { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.qkey > h4 { margin: 0; padding: 12px 16px; background: var(--navy); color: #fff; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.qkey > div { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.qkey h5 { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--navy); }
.qkey .md { font-size: calc(17px * var(--fz)); line-height: 1.7; }
.qbar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.prog { flex: 1 1 200px; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.prog > i { display: block; height: 100%; background: var(--navy); border-radius: 999px; transition: width .3s; }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; }
.seg button { all: unset; cursor: pointer; padding: 6px 12px; font-size: 14px; font-weight: 600; color: var(--sub); }
.seg button.on { background: var(--navy); color: #fff; }
.qnav { display: flex; flex-wrap: wrap; gap: 6px; }
.qnav button { all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line2); display: grid; place-items: center; font-size: 14px; font-weight: 700; background: #fff; }
.qnav button.cur { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy) inset; }
.qnav button.ok { background: var(--ok-soft); border-color: #9fd3b4; color: var(--ok); }
.qnav button.no { background: var(--bad-soft); border-color: #f0b4ad; color: var(--bad); }
.qnav button.ans { background: var(--soft); }

/* 오른쪽 서랍(개념 카드) */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--bg); z-index: 55; transform: translateX(100%); transition: transform .22s ease;
  display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(20,38,74,.16); }
.drawer.open { transform: none; }
.drawer-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.drawer-t { display: inline-flex; align-items: center; gap: 8px; color: var(--navy-d); font-size: 18px; font-weight: 800; }
.drawer-t svg { color: var(--navy); }
.drawer-bd { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.drawer-bg { position: fixed; inset: 0; background: rgba(20,38,74,.3); z-index: 54; }
.drawer.left { right: auto; left: 0; width: min(560px, calc(100vw - var(--pane-w, 0px) - 24px)); transform: translateX(-100%); box-shadow: 10px 0 30px rgba(20,38,74,.18); }
.drawer.left.open { transform: none; }
.drawer:not(.open) { visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }

/* 과목 지도 */
.mapch { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.mapch > header { display: flex; gap: 14px; align-items: center; padding: 18px 20px; flex-wrap: wrap; }
.mapch > header h2 { font-family: var(--sans); font-weight: 800; font-size: 20px; color: var(--navy-d); flex: 1 1 260px; }
.mapch ol { list-style: none; margin: 0; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.mapch li a { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; text-decoration: none; color: var(--ink); flex-wrap: wrap; }
.mapch li a:hover { background: var(--bg); }
.mapch li .t { flex: 1 1 240px; min-width: 0; font-weight: 600; }
.mapch li .m { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); }
.bar { width: 90px; height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; display: inline-block; }
.bar > i { display: block; height: 100%; background: var(--ok); }
.locknote { font-size: 14px; color: var(--muted); padding: 0 20px 16px; }
.weak li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.weak li:last-child { border-bottom: 0; }

@media (max-width: 640px) {
  .lrn-main { padding: 18px 14px 80px; }
  .qcard { padding: 18px 16px; }
  .qstem { font-size: calc(17px * var(--fz)); }
  .choice { font-size: calc(17px * var(--fz)); padding: 12px; }
  .ccard > header { padding: 16px; }
  .ccard .cbody { padding: 0 16px 16px; }
}
@media print {
  .hd, .ft, .wkbar, .compass, .seltool, .noprint { display: none !important; }
  .lrn-main { margin: 0 !important; padding: 0; }
  .ccard .cbody { display: flex !important; }
}

/* 똑순쌤이 알려 주는 상자 (학습목표·출제자의 함정·출제의도·풀이 요령) */
.teach.small > .face { width: 40px; height: 40px; }
.teach .thd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.teach .thd b { font-size: 16px; font-weight: 800; }
.teach.small .thd b { font-size: 15px; }
.teach .say { font-size: 14px; opacity: .85; }
.teach .tmd .md, .teach .tmd.md, .teach #cGoals, .teach #tipMd { text-align: left; }
.goalbox.teach .md { color: var(--ink); }
.goalbox.teach .thd b { color: var(--navy-d); }
.cpart.trap.teach .thd b { color: var(--bad); }
.cpart.trap.teach .say { color: var(--bad); }
.tip .face { width: 48px; height: 48px; }
.verdict .face { width: 46px; height: 46px; }
/* 가운데 안내 창 */
.saved { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ok); white-space: nowrap; }
.qsrc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* 계산기 서랍(오른쪽) — 학습장·실전모의고사 공통, 넓은 화면에서는 붙어서 열림 */
:root { --calc-w: 284px; }
.calc { position: fixed; top: 0; right: 0; bottom: 0; width: var(--calc-w); max-width: 92vw; background: #fff; border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .22s ease; z-index: 41; display: flex; flex-direction: column; }
.calc.open { transform: none; box-shadow: -8px 0 30px rgba(20,38,74,.14); }
.calc-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.calc-hd b { font-family: var(--sans); font-weight: 800; color: var(--navy-d); font-size: 18px; }
.calc-bd { overflow-y: auto; padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.calc-scr { background: var(--navy-d); color: #fff; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-height: 96px;
  box-shadow: 0 0 0 3px transparent; outline: none; text-align: right; }
.calc-scr:focus-visible, .calc.open .calc-scr:focus { box-shadow: 0 0 0 3px var(--gold); }
.calc-scr small { font-size: 14px; color: #c9d3e3; min-height: 18px; word-break: break-all; }
.calc-scr b { font-size: 28px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; word-break: break-all; font-variant-numeric: tabular-nums; }
.calc-scr span { font-size: 14px; color: var(--gold); min-height: 18px; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.calc-keys button { all: unset; box-sizing: border-box; cursor: pointer; height: 46px; border-radius: 12px; border: 1px solid var(--line2); background: #fff; display: grid; place-items: center;
  font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-keys button:hover { border-color: var(--navy); }
.calc-keys button:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.calc-keys button:active { transform: translateY(1px); }
.calc-keys .k-op { background: var(--soft); color: var(--navy-d); }
.calc-keys .k-fn { font-size: 15px; }
.calc-keys .k-eq { background: var(--gold); border-color: var(--gold); color: var(--navy-d); font-weight: 800; }
.calc-hist { display: flex; flex-direction: column; gap: 6px; }
.calc-hh { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--navy-d); }
.calc-hist ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.calc-hist li button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; flex-direction: column; align-items: flex-end; padding: 6px 8px; border-radius: 8px; }
.calc-hist li button:hover { background: var(--bg); }
.calc-hist li small { font-size: 14px; color: var(--muted); word-break: break-all; text-align: right; }
.calc-hist li b { font-size: 16px; color: var(--navy-d); font-variant-numeric: tabular-nums; }
.calc-help { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.linkbtn { all: unset; cursor: pointer; font-size: 14px; color: var(--navy); }
.linkbtn:hover { text-decoration: underline; }
.calc-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 39; writing-mode: vertical-rl; background: var(--navy); color: #fff;
  border: 0; border-radius: 12px 0 0 12px; padding: 14px 8px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; letter-spacing: 2px; box-shadow: -2px 4px 14px rgba(20,38,74,.2); }
.calc-tab:hover { background: var(--navy-d); }
.calc-tab .fab-ic { display: none; }   /* 둥근 단추 그림: 휴대폰에서만 보임(아래 640px 이하) */
.calc-bg { position: fixed; inset: 0; background: rgba(20,38,74,.3); z-index: 38; }
@media (min-width: 1180px) {
  body.calc-docked .lrn-main, body.calc-docked .exam-main { margin-right: var(--calc-w); }
  body.calc-docked .calc { box-shadow: none; z-index: 19; }
}
@media (max-width: 640px) {
  .calc-tab { writing-mode: horizontal-tb; top: auto; bottom: 16px; right: 12px; transform: none; border-radius: 999px; padding: 10px 16px; letter-spacing: 0; }
  .calc-tab { display: inline-flex; align-items: center; gap: 6px; }
  .calc-tab .fab-ic { display: block; width: 18px; height: 18px; }
}
/* PC 문제 서랍 안: 좁아도 계산기 단추는 오른쪽 세로 손잡이(문제 글을 가리지 않게) */
body.in-drawer .calc-tab { writing-mode: vertical-rl; top: 50%; bottom: auto; right: 0; left: auto; transform: translateY(-50%); border-radius: 12px 0 0 12px; padding: 14px 8px; letter-spacing: 2px; }
body.in-drawer .calc-tab .fab-ic { display: none; }
/* 휴대폰 문제 창·실전모의고사: 계산기는 왼쪽 아래 동그란 단추. 처음 누르면 이름이 펼쳐지고, 한 번 더 누르면 열림
   읽어 내려가 머리줄이 숨으면 함께 숨고, 올리면 다시 보임 — PC 서랍 안(in-drawer)·따로 띄운 창(popup)은 위의 예전 모양 그대로
   (학습장 절 화면은 둥근 단추 없이 ⋮ 이 화면 도구에서 엶) */
@media (max-width: 640px) {
  body:not(.in-drawer):not(.popup) .calc-tab {
    writing-mode: horizontal-tb; top: auto; right: auto; left: 12px; bottom: 16px; transform: none;
    display: inline-flex; align-items: center; height: 46px; min-width: 46px; padding: 0 12px; border-radius: 999px;
    background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0; line-height: 1;
    box-shadow: 0 6px 18px rgba(20,38,74,.28); transition: transform .22s ease, padding .2s ease; -webkit-tap-highlight-color: transparent; }
  body:not(.in-drawer):not(.popup) .calc-tab:active { background: var(--navy-d); }
  body:not(.in-drawer):not(.popup) .calc-tab::before { content: none; }
  body:not(.in-drawer):not(.popup) .calc-tab .fab-ic { display: block; flex: 0 0 auto; }
  body:not(.in-drawer):not(.popup) .calc-tab .fab-tx { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
    transition: max-width .22s ease, opacity .18s ease, margin .22s ease; }
  body:not(.in-drawer):not(.popup) .calc-tab.peek { padding-right: 16px; }
  body:not(.in-drawer):not(.popup) .calc-tab.peek .fab-tx { max-width: 9em; opacity: 1; margin-left: 8px; }
  html.hd-hidden body:not(.in-drawer):not(.popup) .calc-tab:not(.peek) { transform: translateX(calc(-100% - 16px)); }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .calc-tab, .calc-tab .fab-tx { transition: none !important; }
}
@media print { .calc, .calc-tab { display: none !important; } }

/* 문제 창 띠의 단추 아이콘(모양은 app.css) — 글자와 한 줄로 */
.wkpane-back svg, .wkpane-fold svg { vertical-align: -3px; }
.wkpane-acts .wkpane-x { display: inline-grid; place-items: center; }
.wkpane-dock i svg, .wkpane-handle i svg { display: block; }
.wkpane-dock i { display: inline-flex; align-items: center; gap: 2px; }