/* 나도스터디 산업안전기사 — 과정 색·과정 전용 모양 (app.css 등 공통 스타일 뒤에 불러온다)
   브랜드: 안전 주황(#e8590c, 경고·주의 색) + 짙은 남색(#1f2f5c, 작업복·안전 표지 바탕). 공인중개사·KBS(티파니)·한국사(주홍)와 구별.
   과목 색 --sa1 ~ --sa6 : app.js subjColor() 가 var(--<과목id>) 를 쓴다.
   korean course.css 의 옛한글 글꼴·듣기 재생기 모양은 뺐다(이 과정에는 없음). */

:root {
  --brand: #e8590c;              /* 안전 주황 */
  --brand-2: #c2410c;            /* 작은 글씨용 (흰 바탕 대비) */
  --accent: #c94a0b;             /* 버튼 바탕 — 흰 글씨가 읽히도록 한 톤 깊게 */
  --accent-soft: #fff0e5;
  --accent-ink: #a53a08;         /* 글자·링크용 */
  --point: #1f2f5c;              /* 짙은 남색 */
  --point-soft: #e9edf7;
  --navy: #1f2f5c;
  --sa1: #e8590c; --sa2: #3867d6; --sa3: #0f8a6a; --sa4: #c99100; --sa5: #8a5a2b; --sa6: #1f2f5c;
  /* 공통 코드가 쓰는 과목색 이름(--s1~--s6)도 이 과정 팔레트로 맞춘다 */
  --s1: var(--sa1); --s2: var(--sa2); --s3: var(--sa3); --s4: var(--sa4); --s5: var(--sa5); --s6: var(--sa6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #f07a2e; --accent-soft: #3a1e0e; --accent-ink: #ffab70; --brand-2: #ff9a55;
    --point: #9db0e8; --point-soft: #1a2340;
    --sa1: #ff8a45; --sa2: #7fa3ff; --sa3: #3cc79c; --sa4: #f0c040; --sa5: #d09a68; --sa6: #9db0e8;
  }
}
:root[data-theme="dark"] {
  --accent: #f07a2e; --accent-soft: #3a1e0e; --accent-ink: #ffab70; --brand-2: #ff9a55;
  --point: #9db0e8; --point-soft: #1a2340;
  --sa1: #ff8a45; --sa2: #7fa3ff; --sa3: #3cc79c; --sa4: #f0c040; --sa5: #d09a68; --sa6: #9db0e8;
}

/* ---------- 머리·아래 메뉴: 위는 주황·남색 사선 띠(안전 표지 느낌), 아래 메뉴는 남색 바탕 + 가운데 주황 AI 단추 ---------- */
.topbar::before { height: 4px !important; background: repeating-linear-gradient(135deg, #e8590c 0 12px, #1f2f5c 12px 24px) !important; }
.tabbar { background: var(--navy) !important; box-shadow: 0 -4px 18px rgba(20, 30, 70, .22) !important; }
.tabbar a.on { color: #fff !important; }
.tabbar a.on svg { color: #ffb27a !important; }
.tabbar .tab-ai .ai-dot { background: radial-gradient(circle at 30% 25%, #ffb27a, #e8590c 58%, #b8420a) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .25), 0 0 0 4px var(--navy) !important; }
.tabbar .tab-ai .ai-dot svg { color: #fff !important; }
.tabbar .tab-ai.on .ai-dot { box-shadow: 0 6px 18px rgba(0, 0, 0, .25), 0 0 0 4px var(--navy), 0 0 0 7px rgba(255, 178, 122, .6) !important; }
body.ait-open .tabbar .tab-ai .ai-dot { box-shadow: 0 6px 18px rgba(0, 0, 0, .25), 0 0 0 4px var(--navy), 0 0 0 7px rgba(255, 178, 122, .6) !important; }
.hb-txt small { color: var(--brand-2) !important; }
.gate-ic { background: color-mix(in srgb, var(--brand) 14%, transparent) !important; }

/* 메뉴 첫 화면 히어로 색 */
.ph-study { --g1: #1f2f5c; --g2: #3b5596; }
.ph { --hi: #ffc38f; }
.ph-wrong { --hi: #ffe8a3; }

/* 포인트 색을 쓰는 자리 */
.brand-tag { color: var(--point); }
.hm-board h1 .hm-sub1 { display: inline-block; margin-top: 6px; font-size: .62em; letter-spacing: -.01em; color: #ffc38f; }
.modal-h .kind.theory { color: var(--point); }

/* 공통 지문 (build_data 가 문항 앞에 붙인다) */
.qstem .box.psg, .box.psg { font-weight: 500; line-height: 1.85; max-height: 60vh; overflow: auto; }
.box.psg p { margin: 0 0 .6em; }
.box.psg p:last-child { margin-bottom: 0; }

/* 헤더 과목명 — "산업안전기사" 한 가지(짧은 이름과 같음) */
.hb-short { display: none; }
@media (max-width: 560px) {
  .topbar .m-brand.hb img.hb-logo { height: 56px !important; }
  .hb-txt b { font-size: 17px; }
  .hdr-row .timer-pill { height: 32px; padding: 0 9px; font-size: 12px; gap: 4px; }
  .hdr-row .timer-pill svg { width: 14px; height: 14px; }
}
@media (max-width: 400px) {
  .hdr-row { gap: 4px !important; padding: 0 10px !important; }
  .topbar .m-brand.hb { gap: 7px !important; }
  .topbar .m-brand.hb img.hb-logo { height: 50px !important; }
  .hb-txt b { font-size: 16px; }
  .hdr-row .acct-btn { padding: 0 9px; }
}
@media (max-width: 360px) { .hb-exam { display: none; } .hdr-row .timer-pill { display: none; } }

/* ---------- 홈 히어로: 과목 팻말 6개 — 한 줄(PC), 좁으면 두 줄 ---------- */
.hm-signs { flex-wrap: nowrap; max-width: 1000px; gap: 6px; }
.hm-sign svg { height: 92px; }
.hm-bow rect, .hm-bow path, .hm-bow circle { fill: var(--brand); }
@media (max-width: 980px) {
  .hm-signs { flex-wrap: wrap; max-width: 560px; gap: 8px 6px; justify-content: space-around; }
  .hm-sign svg { height: 66px; }
}

/* 선생님: 반사 조끼 · 흰 안전모 / 아이: 노란 안전모 */
.hm-arm { stroke: #f08a2c; }
.hm-vest { fill: none; stroke: #e9eef2; stroke-width: 4.5; stroke-linecap: round; }
.hm-vest-z { fill: none; stroke: #3a2f28; stroke-width: 1.6; stroke-dasharray: 3 3; }
.hm-helm-d { fill: #fbfaf4; stroke: #3a2f28; stroke-width: 2.6; stroke-linejoin: round; }
.hm-helm-b { fill: #fbfaf4; stroke: #3a2f28; stroke-width: 2.4; }
.hm-helm-r { fill: none; stroke: #3a2f28; stroke-width: 1.6; stroke-linecap: round; opacity: .55; }
.hm-helm-sh { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; opacity: .9; }
.hm-helm-e { fill: #fff; stroke: #3a2f28; stroke-width: 1.6; }
.hm-helm-x { fill: none; stroke: #2f9e44; stroke-width: 2.6; stroke-linecap: round; }
.hm-helm.hm-helm-y .hm-helm-d, .hm-helm.hm-helm-y .hm-helm-b { fill: #ffd43b; }

/* 칠판 소품: 분필 낙서(경고 표지·녹십자·안전제일), 받침대 위 안전모·라바콘 */
.hm-hero .hm-doodle-s { position: absolute; right: 18px; bottom: 58px; width: 118px; opacity: .6; pointer-events: none; }
.hm-board .hm-lead { max-width: calc(100% - 120px); }
.hm-dd { fill: none; stroke: #f3f6f1; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hm-dd.g { stroke: #9be3a6; stroke-width: 4; }
.hm-dd.y { stroke: #ffe27a; }
.hm-hero .scene .hm-dd-t { fill: #f3f6f1; font-family: Gaegu, 'Nanum Pen Script', cursive; font-size: 19px; font-weight: 700; letter-spacing: .08em; }
.hm-hat { width: 64px; margin-bottom: 1px; flex: none; }
.hm-cone { width: 34px; margin-bottom: 0; flex: none; }
.hm-hat svg, .hm-cone svg { display: block; width: 100%; height: auto; }
.hm-hat-d, .hm-hat-b { fill: #ffd43b; stroke: #3a2f28; stroke-width: 2.4; stroke-linejoin: round; }
.hm-hat-r { fill: none; stroke: #3a2f28; stroke-width: 1.5; opacity: .5; }
.hm-hat-sh { fill: none; stroke: #fff6c9; stroke-width: 2.6; stroke-linecap: round; }
.hm-cone-b { fill: #f76707; stroke: #3a2f28; stroke-width: 2.2; stroke-linejoin: round; }
.hm-cone-w { fill: #fff; }
.hm-cone-f { fill: #d9480f; stroke: #3a2f28; stroke-width: 2.2; }
@media (max-width: 860px) { .hm-hero .hm-doodle-s { width: 100px; bottom: 60px; right: 12px; opacity: .45; } }
@media (max-width: 640px) { .hm-board .hm-lead { max-width: none; } }
@media (max-width: 640px) { .hm-hero .hm-doodle-s, .hm-cone { display: none; } .hm-hat { width: 52px; } }

/* 홈 곳곳의 티파니 고정색을 이 과정 색으로 */
.hm-kicker { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M2 4 C20 1.5 36 5.5 54 3.2 S84 2 98 4' fill='none' stroke='%23e8590c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") !important; }
.hm-plate svg { color: var(--brand-2); }
.hm-chalk { color: #7a2e06; background: linear-gradient(#fff6ef, #ffd9bf 55%, #ffc49c); }
.hm-chalk::after { background: #fff0e4; }
.hm-ph-tab b { background: radial-gradient(circle at 30% 25%, #ffb27a, #e8590c 55%, #b8420a); }
.hm-flow li:nth-child(7) .hm-fl-ic { background: radial-gradient(circle at 30% 25%, #ffb27a, #e8590c 55%, #b8420a); color: #fff; }
.hm-flow li:nth-child(6) .hm-fl-ic { background: var(--bad-soft); color: var(--bad); }
.hm-flow li:nth-child(5) .hm-fl-ic { background: var(--accent-soft); color: var(--accent-ink); }
.hm-flow li:nth-child(4) .hm-fl-ic { background: var(--point-soft); color: var(--point); }
.hm-flow { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 980px) { .hm-flow { grid-template-columns: repeat(4, 1fr); } .hm-flow li:nth-child(5)::before, .hm-flow li:nth-child(5)::after { display: none; } .hm-flow li:nth-child(4)::before, .hm-flow li:nth-child(4)::after { display: block; } }
@media (max-width: 640px) { .hm-flow { grid-template-columns: 1fr 1fr; } }
.hm-msg.me .hm-bub { background: var(--navy); }
.hm-price-card { background: linear-gradient(135deg, #1f2f5c 0%, #2c4280 52%, #e8590c 140%); box-shadow: 0 14px 34px -14px rgba(31, 47, 92, .7); }
.hm-price-card .hm-btn-main { background: #e8590c; color: #fff; }
.hm-price-l h2 em { color: #ffc38f; }
.hm-price-inc svg { color: #1f2f5c; }
.hm-price-inc li { align-items: flex-start; }
.hm-price-inc li svg { margin-top: 2px; }
.hm-nop-card { background: #1c2438; }
.hm-nop-yes { background: #e8590c; }
.hm-nop-yes .hm-nop-mk { color: #c94a0b; }
.hm-nop-arrow { color: #ff9a55; }
.hm-nop-foot em { color: #ffb27a; }
.hm-ask { box-shadow: 0 10px 28px rgba(232, 89, 12, .16); }
.hm-ask-go { box-shadow: 0 6px 16px rgba(201, 74, 11, .3); }
.hm-ask.is-prep .hm-ask-qt { color: var(--muted); font-weight: 700; }
.hm-ask.is-prep .hm-ask-a p b { color: var(--accent-ink); }
.hm-prep-note { font-size: 13px; color: var(--muted); }
.hm-prep-msg .hm-bub { background: var(--surface-2) !important; color: var(--text-2) !important; border: 1px dashed var(--line-2); }
.hm-prep-msg .hm-bub small { color: var(--muted); font-weight: 600; }

/* ---------- 홈: 과목 카드 6장 (손그림 아이콘) ---------- */
.hm-sc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hm-sc {
  position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px 16px; border-radius: 20px; color: inherit;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden;
  transition: transform .15s ease, border-color .15s ease;
}
.hm-sc::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); }
.hm-sc:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.hm-sc.is-prac { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 5%, var(--surface)) 0 14px, var(--surface) 14px 28px); border-style: dashed; border-color: color-mix(in srgb, var(--c) 40%, var(--line)); }
.hm-si {
  flex: none; width: 70px; height: 70px; display: grid; place-items: center;
  border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%; background: color-mix(in srgb, var(--c) 15%, var(--surface));
}
.hm-si-svg { width: 56px; height: 56px; overflow: visible; }
.hm-si-svg * { stroke: #3a2f28; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hm-si-svg .si-f { fill: var(--c); }
.hm-si-svg .si-f2 { fill: color-mix(in srgb, var(--c) 30%, #fff); stroke-width: 0; }
.hm-si-svg .si-w { fill: #fffdf6; }
.hm-si-svg .si-y { fill: #ffd43b; }
.hm-si-svg .si-p { fill: #ff9fb3; }
.hm-si-svg .si-k { fill: #3a2f28; }
.hm-si-svg .si-ln { fill: none; }
.hm-si-svg .si-g { fill: none; stroke: #2f9e44; stroke-width: 2.8; }
.hm-si-svg .si-sh { fill: none; stroke: #fff; stroke-width: 2.6; opacity: .8; }
.hm-si-svg .si-arc { fill: none; stroke-width: 7; stroke-linecap: butt; }
.hm-si-svg .si-arc.g { stroke: #40c057; } .hm-si-svg .si-arc.y { stroke: #fcc419; } .hm-si-svg .si-arc.r { stroke: #fa5252; }
.hm-si-svg .si-nd { fill: none; stroke-width: 3; }
.hm-sc-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hm-sc-no { font-size: 12.5px; font-weight: 900; color: var(--c); letter-spacing: -.01em; }
.hm-sc h3 { margin: 0; font-size: 17.5px; font-weight: 900; line-height: 1.35; letter-spacing: -.03em; word-break: keep-all; }
.hm-sc p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; word-break: keep-all; }
.hm-sc-m { margin-top: 8px; font-size: 13px; color: var(--text-2); }
.hm-sc-m b { font-weight: 900; color: var(--text); }
.hm-prep { display: inline-block; margin-right: 4px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 900; color: var(--accent-ink); background: var(--accent-soft); }
.hm-sc .hm-cc-bar { display: block; height: 5px; border-radius: 4px; background: var(--surface-2); margin-top: 8px; overflow: hidden; }
.hm-sc .hm-cc-bar span { display: block; height: 100%; background: var(--c); border-radius: 4px; }
@media (max-width: 980px) { .hm-sc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .hm-sc-grid { grid-template-columns: 1fr; gap: 10px; }
  .hm-sc { padding: 14px 14px 13px; gap: 12px; }
  .hm-si { width: 58px; height: 58px; }
  .hm-si-svg { width: 46px; height: 46px; }
  .hm-sc h3 { font-size: 16px; }
  .hm-sc p { font-size: 13px; }
}

/* 시험 안내: 공고 전 줄 · 시험 기간 배지 */
.st-exam { background: #1f2f5c; color: #fff; }
.ex-sch tr.ex-pend td { background: color-mix(in srgb, var(--point) 4%, transparent); }
.ex-sch tr.ex-pend td small { display: block; }
.xb-t .ap-st { margin-left: 6px; font-size: 13px; vertical-align: 2px; }
.ex-sec h2 small { font-size: 13px; font-weight: 700; }

/* 준비 중 화면 (모의고사 · 학습방법 화면 사진이 아직 없을 때 · 콘텐츠 준비 중) */
.mk-ready { text-align: center; padding: 34px 20px 30px; }
.mk-ready .mk-ic { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink); }
.mk-ready .mk-ic svg { width: 30px; height: 30px; }
.mk-ready h2 { margin: 0 0 8px; font-size: 20px; }
.mk-ready p { margin: 6px auto; max-width: 560px; color: var(--muted); line-height: 1.7; }
.mk-note { margin-top: 14px; font-size: 13px; color: var(--muted); }
.mk-plan { list-style: none; padding: 0; margin: 18px auto 0; max-width: 520px; text-align: left; display: grid; gap: 8px; }
.mk-plan li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.mk-plan li b { color: var(--point); white-space: nowrap; }
.gd-ready { display: grid; place-items: center; min-height: 220px; border: 2px dashed var(--line-2, var(--line)); border-radius: 16px;
  color: var(--muted); font-weight: 700; background: var(--surface); text-align: center; padding: 20px; }
.prep-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px 16px; margin: 0 0 16px; border-left: 4px solid var(--brand); }
.prep-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.prep-ic svg { width: 22px; height: 22px; }
.prep-t b { font-size: 16px; }
.prep-t p { margin: 5px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.subj-card.is-prep { opacity: .78; }
.subj-card.is-prep .meta span:first-child { color: var(--accent-ink); font-weight: 800; }
.lv-tag { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800;
  color: var(--point); background: var(--point-soft); letter-spacing: 0; }
.ait-chip.is-prep { color: var(--muted); border-style: dashed; cursor: default; }

/* 계산기 버튼·수식 자리 (설계만 — course.js calc.enabled 가 true 가 되면 문제 화면에 켠다) */
.calc-btn { display: inline-flex; align-items: center; gap: 6px; }
.calc-btn[disabled] { opacity: .55; cursor: not-allowed; }
.mathx { font-family: 'Cambria Math', 'STIX Two Math', 'Times New Roman', serif; font-size: 1.05em; white-space: nowrap; }
.mathx .fr { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 2px; }
.mathx .fr > span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 3px; }

/* 푸터 상표 고지 */
.sf-notice { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--text-2); line-height: 1.6; }

/* 수강신청 문구 */
.ac-promo { margin: 6px 0 4px; font-weight: 800; color: var(--accent-ink); }
.ac-feenote { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.ac-avatar, .ait-av { background: radial-gradient(circle at 30% 25%, #ffb27a, #e8590c 55%, #b8420a) !important; }
.guide-hero, .gd-hero { background: linear-gradient(135deg, #16223f 0%, #1f2f5c 50%, #9a3a0c 130%) !important; }
.ex-why-ic { background: color-mix(in srgb, var(--brand) 14%, transparent) !important; color: var(--accent-ink) !important; }

/* ===== 모의고사 (assets/mock.js) — 필기 100문항·150분 실전 / 연습 / 결과 ===== */
.mx-sets { display: grid; gap: 12px; }
.mx-set { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; padding: 16px 18px; }
.mx-set h3 { margin: 0 0 4px; font-size: 18px; }
.mx-set .mx-sub { font-size: 13.5px; color: var(--muted); }
.mx-set .mx-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .mx-set { grid-template-columns: 1fr; } .mx-set .mx-btns { justify-content: stretch; } .mx-set .mx-btns .btn { flex: 1 1 auto; justify-content: center; } }
.mx-bar { position: sticky; top: calc(var(--hdr-h) + 6px); z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
.mx-clock { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--point); letter-spacing: -.02em; }
.mx-clock.low { color: var(--bad); }
.mx-prog { font-size: 13px; color: var(--muted); font-weight: 700; }
.mx-bar .grow { flex: 1 1 auto; }
.mx-psg { margin: 18px 0 10px; }
.mx-psg-h { font-size: 14px; font-weight: 800; color: var(--point); margin: 0 0 6px; }
.mx-area-h { margin: 26px 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--point-soft); color: var(--point); font-weight: 900; font-size: 15px; display: flex; gap: 10px; align-items: baseline; }
.mx-area-h small { font-weight: 700; color: var(--muted); font-size: 12.5px; }
.pq .opts.marked .opt.pick { border-color: var(--point); background: color-mix(in srgb, var(--point) 10%, var(--surface)); box-shadow: inset 0 0 0 1px var(--point); }
.pq .opts.marked .opt.pick .on { background: var(--point); color: #fff; border-color: var(--point); }
.mx-sheet { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 10px 0 0; }
.mx-sheet a { display: grid; place-items: center; height: 30px; border-radius: 6px; font-size: 12px; font-weight: 800; color: var(--muted);
  border: 1px solid var(--line); background: var(--surface); text-decoration: none; }
.mx-sheet a.done { background: var(--point); border-color: var(--point); color: #fff; }
.mx-sheet a.ok { background: var(--ok-soft, #e6f6ee); border-color: var(--ok); color: var(--ok); }
.mx-sheet a.ng { background: var(--bad-soft, #fdeceb); border-color: var(--bad); color: var(--bad); }
@media (max-width: 520px) { .mx-sheet { grid-template-columns: repeat(10, 1fr); gap: 3px; } .mx-sheet a { height: 26px; font-size: 11px; } }
.mx-res { padding: 22px 20px; }
.mx-score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mx-score b { font-size: 52px; font-weight: 900; letter-spacing: -.04em; color: var(--point); line-height: 1; }
.mx-score span { font-size: 16px; color: var(--muted); font-weight: 700; }
.mx-areas { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }
.mx-areas th, .mx-areas td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.mx-areas th { font-size: 12.5px; color: var(--muted); font-weight: 800; }
.mx-areas td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx-areas .mx-ab { position: relative; height: 8px; border-radius: 4px; background: var(--line); min-width: 60px; }
.mx-areas .mx-ab span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--c, var(--point)); }
.mx-hist { font-size: 13.5px; }
.mx-noscore { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.ex-h3 { margin: 18px 0 8px; font-size: 16px; }
.ex-h3 small { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.ex-tm { color: var(--text-2); }
.xb-open { color: var(--ok); }
.ex-more { margin: 14px 0 4px; }
.ex-more summary { cursor: pointer; font-weight: 800; font-size: 15px; color: var(--point); padding: 8px 0; }
.ex-more summary small { font-size: 12.5px; color: var(--muted); font-weight: 700; }

/* ---------- 실기 작업형(동영상형): 장면 재생 화면 자리 — 홈 카드(.hm-spf) · 기본학습 과목 화면(.sp-frame) ---------- */
:root { --sa7: #5f3dc4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sa7: #b197fc; } }
:root[data-theme="dark"] { --sa7: #b197fc; }
.hm-sc-g + .hm-sc-g { margin-top: 18px; }
.hm-sc-gh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 2px 10px; }
.hm-sc-gh b { font-size: 18px; font-weight: 900; }
.hm-sc-gh span { font-size: 13px; color: var(--muted); }
.hm-sc-grid.g2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .hm-sc-grid.g2 { grid-template-columns: 1fr; } }
.hm-spf { display: block; margin-top: 10px; border-radius: 12px; overflow: hidden; border: 2px solid #3a2f28; background: #111827; max-width: 320px; }
.hm-spf-st { position: relative; display: block; line-height: 0; }
.hm-spf-st svg { width: 100%; height: auto; display: block; opacity: .55; }
.hm-spf-sky { fill: #cfe8fb; } .hm-spf-gr { fill: #c69b6d; }
.hm-spf-sc { fill: #adb5bd; } .hm-spf-pl { fill: #8a5a2b; }
.hm-spf-hd { fill: #ffe1c8; stroke: #3a2f28; stroke-width: 1.5; } .hm-spf-hm { fill: #ffd43b; stroke: #3a2f28; stroke-width: 1.5; }
.hm-spf-bd { fill: #e8590c; stroke: #3a2f28; stroke-width: 1.5; }
.hm-spf-play { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; display: grid; place-items: center; background: rgba(17, 24, 39, .82); color: #fff; }
.hm-spf-play svg { width: 16px; height: 16px; }
.hm-spf-tag { position: absolute; left: 8px; top: 8px; line-height: 1.4; padding: 2px 8px; border-radius: 999px; background: rgba(17, 24, 39, .8); color: #fff; font-size: 11px; font-weight: 800; }
.hm-spf-bar { display: flex; align-items: center; gap: 8px; padding: 6px 9px; line-height: 1; }
.hm-spf-bar i { flex: 1; height: 4px; border-radius: 2px; background: #374151; }
.hm-spf-bar em { font-style: normal; font-size: 10.5px; color: #cbd5e1; font-variant-numeric: tabular-nums; }
.sp-frame { padding: 0; overflow: hidden; }
.sp-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; aspect-ratio: 16 / 9; max-height: 420px; padding: 16px;
  background: repeating-linear-gradient(135deg, #1b2335 0 18px, #1f2a40 18px 36px); color: #e5e7eb; }
.sp-stage b { font-size: 17px; }
.sp-stage small { color: #aab3c5; font-size: 13px; }
.sp-play { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; margin-bottom: 6px; }
.sp-play svg { width: 24px; height: 24px; }
.sp-ctrl { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sp-bar { flex: 1 1 120px; height: 6px; border-radius: 3px; background: var(--line); }
.sp-time { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 과목 팻말 7개 */
.hm-sign svg { height: 84px; }
@media (max-width: 980px) { .hm-sign svg { height: 62px; } }
.hm-sc-grid.g2 { align-items: start; }

/* 2026-09-29 사용자: 필기 5과목은 3 + 2 로 빈칸 없이 꽉 차게, 실기 두 카드는 같은 높이(필답형에도 같은 크기 답안지 그림) */
@media (min-width: 981px) {
  .hm-sc-grid.g1 { grid-template-columns: repeat(6, 1fr); }
  .hm-sc-grid.g1 > .hm-sc { grid-column: span 2; }
  .hm-sc-grid.g1 > .hm-sc:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 641px) and (max-width: 980px) { .hm-sc-grid.g1 > .hm-sc:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.hm-sc-grid.g2 { align-items: stretch; }
.hm-sc-grid.g2 .hm-sc-t { align-self: stretch; }
.hm-sc-grid.g2 .hm-sc-m { margin-top: auto; padding-top: 8px; }
.hm-wpf-bg { fill: #e9edf2; } .hm-wpf-pp { fill: #fff; stroke: #94a3b8; stroke-width: 1.2; }
.hm-wpf-ln { stroke: #1f2f5c; stroke-width: 2; stroke-linecap: round; }
.hm-wpf-n { font: 800 10px 'Noto Sans KR', sans-serif; fill: #8a5a2b; }
.hm-wpf-ok { fill: none; stroke: #e03131; stroke-width: 2.4; } .hm-wpf-ck { fill: none; stroke: #e03131; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hm-wpf .hm-spf-st svg { opacity: 1; }
.hm-wpf-sc { background: linear-gradient(90deg, #12b886 100%, transparent 0) !important; }

/* 필기 모의 결과 — 문항별 맞힘·틀림·안 풂 표지와 골라 보기 (2026-09-30) */
.mx-rb { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 900; margin-right: 6px; }
.mx-rb.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.mx-rb.ng { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.mx-rb.none { background: var(--surface-2); color: var(--muted); }
.pq.r-ok { border-left: 4px solid var(--ok); } .pq.r-ng { border-left: 4px solid var(--bad); } .pq.r-none { border-left: 4px solid var(--line); }
.mx-rfs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.mx-rf { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 800; font-size: 14px; cursor: pointer; }
.mx-rf b { margin-left: 2px; }
.mx-rf.on { background: var(--text); color: var(--surface); border-color: var(--text); }
#mx-rlist[data-f="ok"] .pq:not(.r-ok), #mx-rlist[data-f="ng"] .pq:not(.r-ng), #mx-rlist[data-f="none"] .pq:not(.r-none) { display: none; }