/* 드론에듀 학습장 스타일 (학습장·열쇠 노트·문항 풀이 공통) */
:root { --qfont: var(--sans); --mark-yellow: #fff1a8; --mark-green: #cdeccf; --mark-blue: #cfe3fb; --mark-pink: #fbd5e0; --compass-w: 300px; }
:root.qf-serif { --qfont: 'Noto Serif KR', 'Nanum Myeongjo', 'Batang', serif; }

/* 본문(마크다운) */
.md { font-size: 17px; line-height: 1.85; 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(--serif); font-size: 20px; color: var(--navy-d); margin: 26px 0 10px; }
.md h4 { font-size: 17px; 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(--gold); background: var(--gold-soft); border-radius: 0 12px 12px 0; color: var(--gold-ink); }
.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: 14px; 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: 14.5px; line-height: 1.75; 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; }
.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: 15px; 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; }
.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: 15px; line-height: 1.7; }
.pop h4 { margin: 0 0 6px; font-size: 16px; color: var(--navy-d); }
.pop .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pop .acts a, .pop .acts button { font-size: 13px; min-height: 32px; padding: 0 10px; }

/* 형광펜 */
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: '✎'; font-size: 12px; vertical-align: super; color: var(--navy); margin-left: 1px; }
.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: 13px; 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; }
.compass { position: fixed; top: 0; left: 0; bottom: 0; width: 330px; max-width: 88vw; background: #fff; color: #142235;
  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(11,26,46,.22); }
.compass.docked { top: var(--hd-h, 0px); width: var(--compass-w); background: #F4F7FB; border-right: 1px solid #D6E0EB; box-shadow: none; }
.compass-hd { flex: 0 0 auto; background: #0B1A2E; color: #fff; padding: 8px 10px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.compass.docked .compass-hd { display: none; }
.chd-r { display: flex; align-items: center; justify-content: space-between; }
.chd-r b { font-size: 18px; }
.cx { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; }
.cx:hover { background: rgba(255,255,255,.1); }
.cx:focus-visible, .c-subj:focus-visible { outline: 2px solid #5EE1E6; outline-offset: 2px; }
.c-subj { display: flex; align-items: center; gap: 8px; min-height: 44px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 0 12px;
  color: #fff; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; text-align: left; }
.c-sp { margin-left: auto; color: #5EE1E6; font-size: 13px; }
.compass-bd { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 24px; display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; }
.compass.docked .compass-bd { padding: 18px 14px 24px; }
.compass-ft { flex: 0 0 auto; padding: 12px; }
.c-all { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 1px solid #B9C8D8; border-radius: 8px; background: #fff; color: #142235; text-decoration: none; font-weight: 600; font-size: 15px; }
.c-all:hover { border-color: #0B1A2E; color: #0B1A2E; }
.compass-bg { position: fixed; inset: 0; background: rgba(11,26,46,.55); z-index: 38; }
/* 지금 위치 · 다음 웨이포인트 */
.here { flex: 0 0 auto; background: #F4F7FB; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.compass.docked .here { background: #fff; border: 1px solid #D6E0EB; padding: 14px; }
.here > small { font-size: 12px; letter-spacing: .12em; color: #2A7F86; font-weight: 600; }
.here-path { font-size: 13px; color: #5D6D80; line-height: 1.5; }
.here-cur { color: #142235; font-size: 15px; line-height: 1.45; }
.here-next { display: flex; align-items: center; gap: 8px; text-decoration: none; background: #fff; border: 1px solid #D6E0EB; border-radius: 8px; padding: 9px 10px; color: #142235; font-size: 14px; line-height: 1.4; }
.here-next:hover { border-color: #0B1A2E; color: #142235; }
.here-next small { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #7A4B00; background: #FFF1D6; border-radius: 4px; padding: 2px 7px; }
.here-next span { flex: 1 1 auto; min-width: 0; }
/* 장 ▸ 절 */
.ctree { display: flex; flex-direction: column; gap: 2px; }
.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: center; gap: 8px; width: 100%; min-height: 40px; padding: 7px 8px; border-radius: 6px; cursor: pointer;
  color: #142235; font-size: 14px; line-height: 1.45; text-decoration: none; }
.ct-row:hover { background: #EEF4FB; color: #142235; }
.ct-row:focus-visible { outline: 2px solid #1E6FE0; outline-offset: -2px; }
.ct-t { flex: 1 1 auto; min-width: 0; }
.ct-c { font-weight: 700; font-size: 14.5px; }
.ct-c .cv { flex: 0 0 auto; color: #7A8B9E; transition: transform .15s; }
.ct-c[aria-expanded="true"] .cv { transform: rotate(90deg); color: #33465C; }
.cur-c > .ct-c { background: #E6EEF7; }
.ct-num { flex: 0 0 auto; font-size: 13px; color: #5D6D80; font-weight: 600; }
.ct-num.ok { color: #17663A; } .ct-num.now { color: #1E6FE0; }
.ct-ch > .ct-grp { padding: 2px 0 6px 12px; display: flex; flex-direction: column; gap: 1px; }
.ct-i { font-size: 14px; }
.ct-i .code { font-weight: 700; color: #33465C; }
.ct-x { color: #7A4B00; }
.ct-x:hover { color: #7A4B00; }
.ct-x .xm { font-weight: 700; }
.ct-b { color: #1E6FE0; font-weight: 600; font-size: 13.5px; }
.ct-row.cur { background: #0B1A2E; color: #fff; }
.ct-row.cur .code { color: #fff; }
.ct-row .wait { font-size: 12px; padding: 1px 5px; }
.nx-tag { font-size: 12px; font-weight: 700; color: #7A4B00; background: #FFE2A8; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.lk { display: inline-flex; vertical-align: -1px; color: #7A8B9E; }
/* 웨이포인트 표지 */
.wp { flex: 0 0 auto; width: 22px; display: flex; align-items: center; justify-content: center; }
.wp-o { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #A8B7C8; box-sizing: border-box; background: #fff; }
.wp-o.half { border-color: #E39A1E; background: linear-gradient(90deg, #FFB547 50%, #fff 50%); }
.wp-cur { width: 22px; height: 22px; border-radius: 50%; background: #0B1A2E; color: #5EE1E6; }
.wp-x { color: #8A4B00; }
.wp-lock { color: #7A8B9E; }
.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); }
.rate { flex: 0 0 auto; font-size: 12px; font-weight: 800; border-radius: 6px; padding: 0 6px; line-height: 19px; }
.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(--gold-soft); border-radius: 12px; padding: 12px 14px; color: var(--gold-ink); }
.goalbox .md { font-size: 14px; line-height: 1.7; color: var(--gold-ink); }
.goalbox .md strong { color: var(--gold-ink); }
@media (min-width: 1180px) {
  .lrn.docked .lrn-main { margin-left: var(--compass-w); }
  body.compass-docked .ft { margin-left: var(--compass-w); }
}

/* 화면 제목 */
.page-title { font-family: var(--serif); 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: var(--gold); display: grid; place-items: center; font-weight: 800; }
.ccard > header h3 { font-family: var(--serif); font-size: 19px; color: var(--navy-d); }
.ccard > header p { margin: 2px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.ccard.fixed > header { cursor: default; }
.ccard.fixed > header .chev { display: none; }
.ccard > header .chev { margin-left: auto; 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: 14px; 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: 15px; }
.cpart.law { background: var(--soft); border-radius: 12px; padding: 12px 14px; }
.cpart.law .md { font-size: 15px; }
.cpart .md { font-size: 16px; }
.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: 15px; line-height: 1.55; }
.flip small { font-size: 12px; 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 { font-size: 13px; text-decoration: none; padding: 5px 10px; border-radius: 999px; background: var(--soft); color: var(--navy); font-weight: 600; }
/* 개념 카드 안에서 문제 한 문제씩 풀기 */
.rel .rq { font: inherit; font-size: 13px; 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); }
@media (pointer: coarse) { .rel .rq { min-height: 40px; padding: 6px 14px; font-size: 14px; } }   /* 손가락으로 누르기 쉬운 높이 */
.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; }
.rel .rq-all::after { content: ' ↗'; }
.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: 13px; 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: 18px; 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: 16px; }
.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: 16.5px; 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: 15px; line-height: 1.65; color: var(--sub); display: flex; flex-direction: column; gap: 6px; }
.ckey .md { font-size: 15px; line-height: 1.65; color: var(--sub); }
.ox { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 13px; 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; font-size: 13px; 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: 15px; line-height: 1.65; }
.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: 15px; 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: 15px; 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: 13px; color: var(--navy); }
.qkey .md { font-size: 15.5px; line-height: 1.75; }
.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(--gold); 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: 13px; 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-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(--serif); 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: 13px; 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: 13px; 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: 17px; }
  .choice { font-size: 16px; padding: 12px; }
  .ccard > header { padding: 16px; }
  .ccard .cbody { padding: 0 16px 16px; }
}
@media print {
  .hd, .ft, .lbar, .compass, .compass-bg, .lsh, .lsh-bg, .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: 15px; }
.teach.small .thd b { font-size: 14px; }
.teach .say { font-size: 13px; opacity: .85; }
.teach .tmd .md, .teach .tmd.md, .teach #cGoals, .teach #tipMd { text-align: left; }
.goalbox.teach .md { color: var(--gold-ink); }
.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 { font-size: 13px; color: var(--ok); white-space: nowrap; }
.qsrc { margin: 0; font-size: 12.5px; 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(--serif); 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 rgba(245,197,66,.75); }
.calc-scr small { font-size: 13px; 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: 13px; 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: 13px; 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: 12.5px; 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: 12.5px; line-height: 1.6; color: var(--muted); }
.linkbtn { all: unset; cursor: pointer; font-size: 13px; 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; }   /* 둥근 단추 그림: 휴대폰에서만 보임 */
.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::before { content: '🧮 '; }
}
/* 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::before { content: none; }
/* 휴대폰(실전모의고사): 계산기는 왼쪽 아래 동그란 단추. 처음 누르면 이름이 펼쳐지고, 한 번 더 누르면 열림 — 학습장에는 둥근 단추가 없음(☰·⋮ 로 옮김) */
@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::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 .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; } }

/* ── 본문 상자(render.js :::exam·law·field·more) */
.mdbox { margin: 14px 0; border-radius: 12px; border: 1px solid var(--line2); background: #fff; overflow: hidden; }
.mdbox-hd { padding: 8px 14px; font-weight: 700; font-size: 14.5px; }
.mdbox-bd { padding: 10px 14px 12px; }
.mdbox-bd > :first-child { margin-top: 0; }
.mdbox-bd > :last-child { margin-bottom: 0; }
.mdbox-exam { border-color: #f0c36a; }
.mdbox-exam .mdbox-hd { background: var(--gold-soft); color: var(--gold-ink); }
.mdbox-law { border-color: #b8c6dd; }
.mdbox-law .mdbox-hd { background: var(--soft); color: var(--navy-d); }
.mdbox-field { border-color: #a9d6bd; }
.mdbox-field .mdbox-hd { background: var(--ok-soft); color: var(--ok); }
.mdbox-more > summary { cursor: pointer; padding: 9px 14px; font-weight: 700; font-size: 14.5px; color: var(--sub); background: var(--soft); }
.mdbox-more[open] > summary { border-bottom: 1px solid var(--line2); }
/* 근거 칩([[law:E-03]] · 문항 lawRefs) */
.lawref { display: inline-block; padding: 1px 7px; margin: 0 2px; border-radius: 999px; font-size: .78em; font-weight: 700; line-height: 1.6;
  background: var(--soft); color: var(--navy); box-shadow: inset 0 0 0 1px var(--line2); white-space: nowrap; vertical-align: .08em; cursor: help; }
.lawref[tabindex]:hover, .lawref[aria-expanded="true"] { background: var(--navy); color: #fff; box-shadow: none; }
.lawref:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* 근거 칩 말풍선 · 근거 법령 창의 항목 */
.lawpop { position: fixed; z-index: 2147483100; background: #fff; color: var(--ink); border: 1px solid var(--line2); border-radius: var(--r-md); box-shadow: var(--sh-2);
  padding: 12px 14px; font-family: var(--sans); font-size: 14.5px; line-height: 1.6; text-align: left; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.lawpop[hidden] { display: none; }
.lawpop::before { content: ''; position: absolute; left: calc(var(--ax, 50%) - 7px); width: 12px; height: 12px; background: #fff; border: 1px solid var(--line2); transform: rotate(45deg); }
.lawpop[data-side="below"]::before { top: -7px; border-right: 0; border-bottom: 0; }
.lawpop[data-side="above"]::before { bottom: -7px; border-left: 0; border-top: 0; }
.lawitem + .lawitem { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.li-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.li-h b { color: var(--navy-d); font-size: 15px; }
.li-h .lawref { cursor: default; }
.li-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; }
.li-kv dt { color: var(--muted); font-size: 13px; font-weight: 700; padding-top: 2px; white-space: nowrap; }
.li-kv dd { margin: 0; }
.li-st { display: flex; flex-wrap: wrap; gap: 4px; }
.li-s { display: inline-block; font-size: 13px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--soft); color: var(--navy-d); }
.li-s.ok { background: var(--ok-soft); color: var(--ok); }
.li-s.warn { background: var(--gold-soft); color: var(--gold-ink); }
.li-s.hold { background: var(--bad-soft); color: var(--bad); }
.li-foot { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
/* 문항 표지: 출처(제보)·수준·근거 */
.qtags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.qtag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--soft); color: var(--sub); white-space: nowrap; }
.qtag.src { background: var(--gold-soft); color: var(--gold-ink); white-space: normal; }
.qtag.lv-basic { background: var(--ok-soft); color: var(--ok); }
.qtag.lv-std { background: var(--soft); color: var(--navy); }
.qtag.lv-adv { background: var(--bad-soft); color: var(--bad); }

/* ── 구술 카드(oral1·oral2): 질문 → 답 보기 → 핵심 단어·꼬리 질문 → 자기 채점 */
.oral { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.oral-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.oral-hd b { color: var(--navy-d); font-size: 17px; }
.ocard { border: 1px solid var(--line2); border-radius: 14px; background: #fff; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ocard .oq { font-weight: 700; font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.ocard .oq small { display: block; font-weight: 600; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.ocard .oa { border-top: 1px dashed var(--line2); padding-top: 10px; }
.ocard .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ocard .opts span { padding: 3px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-ink); font-size: 13px; font-weight: 700; }
.ocard .ofu { margin: 0; padding-left: 20px; color: var(--sub); font-size: 14.5px; }
.ocard .oacts { display: flex; gap: 6px; flex-wrap: wrap; }
.ocard.self-ok { border-color: #a9d6bd; }
.ocard.self-no { border-color: #f1b0a8; }
.oral-nav { display: flex; gap: 8px; align-items: center; justify-content: center; }

/* ════════ 학습장 개편(조종기 화면): 학습장 바 · 겹쳐 뜨는 판 · 단위 · 학습장 글꼴·색 ════════ */
/* 학습장 안에서만: IBM Plex Sans KR(글) · IBM Plex Mono(숫자·계기) · 연한 지도 바탕 · 가는 테두리 10px 모서리 */
html[data-area="learn"] {
  --sans: 'IBM Plex Sans KR', 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --serif: var(--sans); --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --navy-d: #0B1A2E; --ink: #142235; --sub: #33465C; --muted: #5D6D80; --line: #E3E9F0; --line2: #D6E0EB; --bg: #F2F5F9;
  --fz: 1; --md-fs: 17px;
}
html[data-fs="s"] { --fz: .9; } html[data-fs="l"] { --fz: 1.16; }
.mono { font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace); font-variant-numeric: tabular-nums; }
html[data-area="learn"] body { background: #F2F5F9; }
html[data-area="learn"] body.pg-map { background-color: #F2F5F9; background-image: linear-gradient(#E3E9F0 1px, transparent 1px), linear-gradient(90deg, #E3E9F0 1px, transparent 1px); background-size: 32px 32px; }
html[data-area="learn"] body.pg-note { background: #fff; }
html[data-area="learn"] .card, html[data-area="learn"] .ccard, html[data-area="learn"] .qcard { border: 1px solid #D6E0EB; border-radius: 10px; box-shadow: none; }
html[data-area="learn"] .page-title, html[data-area="learn"] .ccard > header h3, html[data-area="learn"] .cards-hd h2 { font-weight: 700; letter-spacing: -.01em; color: #142235; }
html[data-area="learn"] .ccard > header .k { background: #0B1A2E; color: #5EE1E6; font-family: var(--mono); border-radius: 50%; }
html[data-area="learn"] :is(.md, .pf-foot, .soonc, .weakc, .msg, .lockcard) a:not(.btn) { color: #1E6FE0; }
html[data-area="learn"] .btn-p { background: #0B1A2E; border-color: #0B1A2E; }
html[data-area="learn"] .btn-p:hover { background: #1A2E4A; border-color: #1A2E4A; color: #fff; }
/* 글자 크기(⚙): 학습 내용에만 */
html[data-area="learn"] .md { font-size: calc(var(--md-fs) * var(--fz)); }
html[data-area="learn"] .cpart .md { font-size: calc(16px * var(--fz)); }
html[data-area="learn"] .cpart.trap .md, html[data-area="learn"] .cpart.law .md, html[data-area="learn"] .ckey .md { font-size: calc(15px * var(--fz)); }
html[data-area="learn"] .qkey .md { font-size: calc(15.5px * var(--fz)); }
html[data-area="learn"] .qstem { font-size: calc(18px * var(--fz)); }
html[data-area="learn"] .choice { font-size: calc(16.5px * var(--fz)); }
html[data-area="learn"] .goalbox .md { font-size: calc(15px * var(--fz)); }
@media (max-width: 640px) { html[data-area="learn"] { --md-fs: 16px; } html[data-area="learn"] .qstem { font-size: calc(17px * var(--fz)); } html[data-area="learn"] .choice { font-size: calc(16px * var(--fz)); } }
/* 용어 설명 점선 끔(⚙) */
html[data-terms="off"] .term { border-bottom-color: transparent; cursor: text; }
html[data-terms="off"] .term:hover, html[data-terms="off"] .term:focus-visible { background: none; }
/* 그림·도표 접어 두기(⚙): 펼쳐 보기 설정이면 접기 줄을 숨김 */
details.figfold { margin: 0 0 16px; }
details.figfold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px dashed #B9C8D8; border-radius: 10px;
  background: #F4F7FB; color: #33465C; font-size: 14px; font-weight: 600; }
details.figfold > summary::-webkit-details-marker { display: none; }
details.figfold > summary::before { content: '▸'; color: #2A7F86; }
details.figfold[open] > summary { margin-bottom: 8px; }
details.figfold[open] > summary::before { content: '▾'; }
html:not([data-figs="fold"]) details.figfold > summary { display: none; }
details.figfold > figure, details.figfold > .tbl-scroll { margin-top: 0; }
/* 단위: [[u:150m]] — 점선, 누르면 단위 환산 계산기 */
.u { border-bottom: 1px dotted #2A7F86; color: #1D5F66; cursor: pointer; white-space: nowrap; }
.u:hover { background: #E6F7F8; }
.u:focus-visible { outline: 2px solid #2A7F86; outline-offset: 1px; border-radius: 2px; }

/* ── 학습장 바 */
.lbar { position: sticky; top: 0; z-index: 30; background: #0B1A2E; color: #E7EEF7; font-family: var(--sans); }
.lb-row { display: flex; align-items: center; gap: 6px; padding: 8px 16px; min-height: 60px; box-sizing: border-box; }
.lb-ib { width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #E7EEF7; cursor: pointer; padding: 0; }
.lb-ib:hover { background: rgba(255,255,255,.08); color: #fff; }
.lb-ib[hidden] { display: none; }
.lb-menu.on { background: rgba(94,225,230,.16); color: #5EE1E6; }
.lb-tools.on, .lb-set.on { background: rgba(255,255,255,.14); color: #fff; }
.lbar :is(button, a):focus-visible { outline: 2px solid #5EE1E6; outline-offset: 2px; }
.lb-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; color: #fff; text-decoration: none; flex: 0 0 auto; padding: 0 4px; }
.lb-brand:hover { color: #fff; }
.lb-brand .logo-mark { display: block; flex: none; }   /* 공식 로고(어두운 바탕용) */
.lb-sep { width: 1px; height: 24px; background: rgba(255,255,255,.18); margin: 0 4px; flex: 0 0 auto; }
.lb-subj { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 0 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
  color: #fff; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; flex: 0 1 auto; }
.lb-subj:hover, .lb-subj.on { background: rgba(255,255,255,.14); }
.lb-subj[hidden] { display: none; }
.lb-sname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-subj svg { flex: 0 0 auto; }
.lb-chip { flex: 0 0 auto; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 4px; color: #fff; line-height: 1.5; }
.lb-crumb { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; color: #A9BACD; white-space: nowrap; overflow: hidden; margin-left: 4px; }
.lb-crumb a { color: #A9BACD; text-decoration: none; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.lb-crumb a:hover { color: #fff; text-decoration: underline; }
.lb-crumb i { font-style: normal; flex: 0 0 auto; }
.lb-crumb b { color: #fff; overflow: hidden; text-overflow: ellipsis; }
.lb-title { display: none; }
.lb-right { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.lb-batw { display: contents; }
.lb-bat { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; margin-right: 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
  background: transparent; color: #E7EEF7; font: inherit; cursor: pointer; }
.lb-bat:hover { background: rgba(255,255,255,.08); }
.lb-bat .mono { font-size: 13px; }
.lb-bt-m { display: none; }
.lb-warn { font-size: 12px; font-weight: 700; }
.lb-bat.low { border-color: #FFB547; color: #FFC970; }
.lb-bat.crit { border-color: #FF7A6B; color: #FF9C90; animation: lbBlink 1.6s ease-in-out infinite; }
.lb-bat.empty { border-style: dashed; border-color: #6B7F95; color: #A9BACD; }
@keyframes lbBlink { 50% { border-color: rgba(255,122,107,.35); box-shadow: 0 0 0 3px rgba(255,122,107,.18); } }
@media (prefers-reduced-motion: reduce) { .lb-bat.crit { animation: none; } }
.lb-free { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; margin-right: 6px; border-radius: 8px; border: 1px solid #FFB547; color: #FFC970; font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.lbar a.lb-free:hover { background: rgba(255,181,71,.12); color: #FFD796; }
.lb-free.adm { border-color: rgba(255,255,255,.3); color: #A9BACD; }
.lb-exit { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.lbar .lb-exit:hover { background: rgba(255,255,255,.08); color: #fff; }
.lb-path { position: relative; height: 3px; background: rgba(94,225,230,.2); }
.lb-path > i { display: block; width: 0; height: 3px; background: #5EE1E6; }
.lb-dr { position: absolute; left: 11px; top: -10px; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: #0B1A2E; color: #5EE1E6; display: flex; align-items: center; justify-content: center; pointer-events: none; }
@media (max-width: 1100px) { .lb-crumb > a, .lb-crumb > i { display: none; } }
@media (max-width: 900px) { .lb-brand b, .lb-sep:not(.lb-sep2), .lb-crumb { display: none; } .lb-bt-pc { display: none; } .lb-bt-m { display: inline; } }
/* 휴대폰: ☰ · 제목 · 배터리 · Ⓗ · ⚙ · ⋮ */
@media (max-width: 640px) {
  .lb-row { gap: 2px; padding: 4px 6px; min-height: 52px; }
  .lb-ib { width: 40px; }
  .lb-brand, .lb-sep, .lb-crumb, .lb-fs, .lb-exit span, .lb-warn { display: none !important; }
  .lb-subj { flex: 1 1 auto; background: transparent; border: 0; padding: 0 4px; font-weight: 700; font-size: 16px; gap: 6px; }
  .lb-subj .lb-chip { font-size: 12px; padding: 2px 6px; }
  .lbar[data-page="note"] .lb-subj { display: none; }
  .lbar[data-page="note"] .lb-title { display: block; flex: 1 1 auto; min-width: 0; padding: 0 4px; font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lb-right { gap: 0; margin-left: 0; }
  .lb-batw { display: contents; }
  .lb-bat { order: 1; border: 0; margin: 0; padding: 0 4px; gap: 4px; min-height: 44px; }
  .lb-bat .bat-ic { width: 28px; height: 14px; }
  .lb-bat .mono { font-size: 12px; }
  .lb-bat.low, .lb-bat.crit { border: 0; }
  .lb-free { order: 1; margin: 0 2px; min-height: 32px; padding: 0 8px; font-size: 12.5px; }
  .lb-exit { order: 2; width: 40px; min-height: 44px; padding: 0; justify-content: center; border: 0; }
  .lb-set { order: 3; } .lb-tools { order: 4; }
  .lb-dr { width: 18px; height: 18px; top: -8px; }
  .lb-dr svg { width: 12px; height: 12px; }
}

/* ── 겹쳐 뜨는 판(sheet.js): PC 말풍선·가운데 창 · 휴대폰 아래 판 */
.lsh-bg { position: fixed; inset: 0; z-index: 64; }
.lsh-bg.is-sheet, .lsh-bg.is-dlg { background: rgba(11,26,46,.55); }
.lsh { position: fixed; z-index: 65; background: #fff; color: #142235; font-family: var(--sans); display: flex; flex-direction: column; outline: none; box-sizing: border-box; overflow: auto; overscroll-behavior: contain; }
.lsh-pop { border: 1px solid #D6E0EB; border-radius: 10px; box-shadow: 0 16px 40px rgba(11,26,46,.22); padding: 8px; }
.lsh-dlg { left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: calc(100vh - 32px); border-radius: 12px; padding: 16px 20px 20px; box-shadow: 0 24px 60px rgba(11,26,46,.3); }
.lsh-sheet { left: 0; right: 0; bottom: 0; max-height: 88vh; max-height: 88dvh; border-radius: 16px 16px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
.lsh-grip { flex: 0 0 auto; width: 40px; height: 4px; border-radius: 2px; background: #C8D3DF; margin: 0 auto 10px; }
.lsh-hd { flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; padding: 0 4px 10px; }
.lsh-hd b { font-size: 18px; }
.lsh-hd span { font-size: 13px; color: #5D6D80; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lsh-pop:not(.lsh-tools) { padding: 12px 14px 14px; }
.lsh-pop .lsh-hd { padding: 2px 2px 10px; }
.lsh-pop .lsh-hd b { font-size: 16px; }
.lsh-pop.lsh-tools .lsh-hd { display: none; }
.lsh-x { margin-left: auto; align-self: center; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; font-size: 18px; color: #33465C; cursor: pointer; }
.lsh-x:hover { background: #EEF2F7; }
.lsh-foot { flex: 0 0 auto; margin-top: 14px; min-height: 50px; border: 0; border-radius: 10px; background: #EEF2F7; color: #142235; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; }
.lsh-foot:hover { background: #E3E9F0; }
.lsh-foot.apply { background: #0B1A2E; color: #fff; font-weight: 700; }
.lsh-foot.apply:hover { background: #1A2E4A; }
.lsh :is(button, a, input, select):focus-visible { outline: 2px solid #1E6FE0; outline-offset: 2px; }
html.lsh-lock body { overscroll-behavior: contain; }
/* ⋮ 도구 차림표 */
.tmenu { display: flex; flex-direction: column; }
.tm { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 6px; color: #142235; font-size: 15px; cursor: pointer; text-decoration: none; }
.lsh .tm:hover, .lsh .tm:focus-visible { background: #EEF4FB; color: #142235; }
.tm svg { width: 20px; height: 20px; flex: 0 0 auto; color: #33465C; }
.tm small { margin-left: auto; padding-left: 10px; font-size: 13px; color: #5D6D80; white-space: nowrap; }
.tm-div { height: 1px; background: #E3E9F0; margin: 6px 8px; }
.lsh-sheet .tm { padding: 12px 6px; font-size: 16px; gap: 14px; }
/* 과목 바꾸기 */
.sj-g { font-size: 13px; font-weight: 700; color: #5D6D80; padding: 10px 2px 6px; }
.sj-g:first-child { padding-top: 0; }
.sj { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid #D6E0EB; border-radius: 10px; background: #fff; color: #142235; text-decoration: none; min-height: 44px; }
.lsh .sj:hover { border-color: #0B1A2E; color: #142235; }
.sj.cur { border: 2px solid #0B1A2E; background: #F4F7FB; padding: 11px 13px; }
.sj-t { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.sj-t b { font-size: 16px; }
.sj-t small { flex-basis: 100%; font-size: 13px; color: #5D6D80; }
.sj-t small.soon { color: #7A4B00; }
.sj > svg { flex: 0 0 auto; color: #7A8B9E; }
.sj-tag { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #4F5D6E; background: #EEF2F7; padding: 3px 8px; border-radius: 4px; }
/* ⚙ 학습 설정 */
.setg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.setg > b { font-size: 15px; }
.seg2 { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; background: #EEF2F7; border-radius: 10px; padding: 4px; }
.seg2 button { min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: #142235; font: inherit; font-size: 14px; cursor: pointer; padding: 0 4px; }
.seg2 button:hover { background: rgba(255,255,255,.6); }
.seg2 button.on { background: #fff; font-weight: 700; box-shadow: 0 1px 3px rgba(11,26,46,.12); }
.newtag { font-size: 12px; font-weight: 700; color: #1D5F66; background: #DDF4F5; padding: 2px 6px; border-radius: 4px; margin-left: 4px; }
.set-ex { display: flex; flex-direction: column; background: #F4F7FB; border-radius: 8px; padding: 10px 12px; font-size: 13.5px; line-height: 1.7; }
.set-ck { display: flex; align-items: center; gap: 12px; font-size: 15px; margin-bottom: 12px; cursor: pointer; }
.set-ck > span, .set-ln > span { display: flex; flex-direction: column; flex: 1 1 auto; }
.set-ck small, .set-ln small { font-size: 13px; color: #5D6D80; }
.set-ck input { width: 24px; height: 24px; accent-color: #0B1A2E; flex: 0 0 auto; }
.set-ln { display: flex; align-items: center; gap: 12px; border-top: 1px solid #E3E9F0; padding-top: 12px; color: #142235; text-decoration: none; font-size: 15px; }
.lsh .set-ln:hover { color: #1E6FE0; }
/* 🔋 이용권 배터리 말풍선 */
.batpop { display: flex; align-items: center; gap: 12px; background: #0B1A2E; color: #E7EEF7; border-radius: 8px; padding: 14px; }
.batpop b { font-size: 16px; }
.batpop.low { outline: 2px solid #FFB547; outline-offset: -2px; } .batpop.low b { color: #FFC970; }
.batpop.crit { outline: 2px solid #FF7A6B; outline-offset: -2px; } .batpop.crit b { color: #FF9C90; }
.batpop.empty b { color: #A9BACD; }
.batpop-tx { margin: 10px 2px 0; font-size: 14px; line-height: 1.65; color: #33465C; }
.lsh-cta { display: flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 10px; border-radius: 8px; background: #FFB547; color: #0B1A2E; font-weight: 700; text-decoration: none; }
.lsh .lsh-cta:hover { background: #FFC970; color: #0B1A2E; }
/* 학습장 이용 방법 */
.helpl { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.6; }
/* 단위 환산 계산기 */
.ucalc .uc-tabs { grid-auto-columns: minmax(0, 1fr); }
.ucalc .uc-tabs button { min-height: 40px; font-size: 13.5px; }
.uc-pane { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.uc-set { display: flex; flex-direction: column; gap: 10px; }
.uc-set + .uc-set { border-top: 1px solid #E3E9F0; padding-top: 12px; }
.uc-in { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; }
.uc-in small { font-weight: 500; color: #5D6D80; }
.uc-row { display: flex; gap: 8px; }
.uc-in input { flex: 1 1 auto; min-width: 0; height: 50px; border: 1px solid #B9C8D8; border-radius: 10px; padding: 0 14px; font-size: 22px; font-family: var(--mono, monospace); box-sizing: border-box; color: #142235; }
.uc-in input:focus { outline: 2px solid #1E6FE0; outline-offset: 1px; border-color: #1E6FE0; }
.uc-in select, .uc-row em { flex: 0 0 auto; height: 50px; min-width: 76px; border: 0; border-radius: 10px; background: #0B1A2E; color: #fff; font: inherit; font-weight: 700; font-size: 16px; padding: 0 10px; font-style: normal; display: inline-flex; align-items: center; justify-content: center; }
.uc-in select { cursor: pointer; }
.uc-out { background: #0B1A2E; color: #E7EEF7; border-radius: 10px; padding: 14px 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.uc-out > div { display: flex; flex-direction: column; min-width: 0; }
.uc-out b { font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
.uc-out b.c { color: #5EE1E6; }
.uc-out span { font-size: 12px; color: #A9BACD; }
.uc-out4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uc-note { margin: 0; font-size: 13px; line-height: 1.6; color: #4A5B70; }
.uc-h { font-size: 14px; padding-top: 4px; }
.uc-tbl { border: 1px solid #D6E0EB; border-radius: 10px; overflow: hidden; font-size: 14px; }
.uc-tbl > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; }
.uc-tbl > div + div { border-top: 1px solid #E3E9F0; }
.uc-tbl small { font-weight: 500; color: #5D6D80; }
.ucalc .lsh-bd > .uc-h { display: block; margin-top: 12px; margin-bottom: 8px; }
.uc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.uc-grid .uc-in input { font-size: 18px; padding: 0 10px; }
.uc-grid .uc-row em { min-width: 44px; font-size: 14px; }
.uc-res { background: #0B1A2E; color: #fff; border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; align-items: flex-end; min-height: 72px; }
.uc-res b { font-size: 26px; font-weight: 600; overflow-wrap: anywhere; }
.uc-res span { font-size: 13px; color: #FFC970; min-height: 18px; }
.uc-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.uc-keys button { min-height: 44px; border: 1px solid #D6E0EB; border-radius: 8px; background: #fff; font: inherit; font-family: var(--mono, monospace); font-size: 17px; color: #142235; cursor: pointer; }
.uc-keys button:hover { border-color: #0B1A2E; }
.uc-keys button.w2 { grid-column: span 2; font-family: var(--sans); font-size: 15px; background: #EEF2F7; }
@media (max-width: 640px) {
  .ucalc .uc-tabs button { font-size: 12.5px; padding: 0 2px; }
  .uc-out4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc-grid .uc-row { flex-direction: column; gap: 4px; }
  .uc-grid .uc-row em { height: 30px; }
}